微信小程序基础而重要语法整理总结（数据绑定、运算表达式、循环渲染、条件渲染、事件绑定（传参））

数据绑定

wxml数据显示

<!-- 1 字符串 -->
<view> {{msg}} </view>
<!-- 2 数字类型 -->
<view>{{num}}</view>
<!-- 3 bool类型  -->
<view> 是否: {{isGirl}} </view>
<!-- 4 object类型 -->
<view>{{person.age}}</view>
<view>{{person.height}}</view>
<view>{{person.name}}</view>

<!-- 5 在标签的属性中使用 -->
<view data-num="{{num}}"> 自定义属性</view>

<!-- 6 使用bool类型充当属性 checked  
字符串和 花括号之间一定不要存在空格 否则会导致识别失败 -->
<view>
  <checkbox checked="{{isChecked}}"> </checkbox>
</view>

js内的data模拟数据

Page({
  data: {
    msg: "hello mina",
    num: 10000,
    isGirl: false,
    person: {
      age: 1,
      height: 165,
      name: "fur"
    },
    isChecked:false,
  }
});

运算表达式

可以在花括号中加入表达式 – “语句”
表达式，指的是一些简单运算数字运算字符串拼接逻辑运算。。
1. 数字的加减
2. 字符串拼接
3. 三元表达式

<view>{{1+1}}</view> 
<view>{{'1'+'1'}}</view>
<view>{{ 11%2===0 ? '偶数' : '奇数' }}</view>
<!--输出
2
11
奇数
-->

循环

一、列表循环

wx:for="{{数组或者对象}}"
wx:for-item=“循环项的名称”
wx:for-index=“循环项的索引”
wx:key=“唯一的值” 用来提高列表渲染的性能

如果 wx:key 绑定一个普通的字符串，那么这个字符串名称，肯定是循环数组中的对象的唯一属性
如果 wx:key ="*this" 就表示你的数组是一个普通的数组 *this 表示是循环项
注意：
当出现数组的嵌套循环的时候尤其要注意以下绑定的名称不要重名
wx:for-item="item" wx:for-index="index"
默认情况下我们不写wx:for-item="item" wx:for-index="index"，小程序也会把循环项的名称和索引的名称设为 item 和 index
只有一层循环的话 wx:for-item="item" wx:for-index="index" 可以省略

二、对象循环

wx:for="{{对象}}" wx:for-item=“对象的值” wx:for-index=“对象的属性”
循环对象的时候最好把 item和index的名称都修改一下 wx:for-item="value" wx:for-index="key"

<!-- 列表循环-->
 <view>
   <view 
  wx:for="{{list}}"
  wx:for-item="item"
  wx:for-index="index"
  wx:key="id">
     索引：{{index}} -- 值:{{item.name}}
   </view>
 </view>
<!-- 对象循环-->
 <view>
   <view 
  wx:for="{{person}}"
  wx:for-item="value"  
  wx:for-index="key"
  wx:key="id">
     属性:{{key}} -- 值:{{value}}
   </view>
 </view>

js的data内元素

person: {
	  id:1,
      age: 1,
      height: 165,
      name: "fur"
    },
list:[
      {
        id:0,
        name:"fur"
      },
      {
        id:1,
        name:"furfur"
      }
    ]

block标签

占位符的标签
写代码的时候可以看到这标签存在，页面渲染时候小程序会把它移除掉

<view>
    <block 
   wx:for="{{list}}"
   wx:for-item="item"
   wx:for-index="index"
   wx:key="id"
   class="my_list" >
      索引：{{index}}
      --
      值:{{item.name}}
    </block>
  </view>

条件渲染

两种方法可以对页面元素进行显示和隐藏

wx:if、wx:elif、wx:else
hidden 用法
1. 在标签上直接加入属性 hidden
2. hidden="{{true}}"

什么场景下用哪个

当标签不是频繁的切换显示优先使用 wx:if，直接把标签从页面结构给移除掉
当标签频繁的切换显示的时候优先使用 hidden，通过添加样式的方式来切换显示
注意：hidden 属性不要和样式 display一起使用！会被覆盖掉，因为hidden的原理就是增加display:none

   <view>
     <view>条件渲染</view>
     <view wx:if="{{true}}">显示</view>
     <view wx:if="{{false}}">隐藏</view>

     <view wx:if="{{flase}}">1</view>
     <view wx:elif="{{flase}}">2 </view>
     <view wx:else> 3 </view>

     <view hidden >hidden1</view>
     <view hidden="{{false}}" >hidden2</view>

     <view wx:if="{{false}}">wx:if</view>
        <!-- 错误用法 ：hidden无法被隐藏 -->
     <view hidden  style="display: flex;" >hidden</view>
   </view>

打印结果：
在这里插入图片描述

事件绑定

例子：使得输入框输入的元素显示到页面元素，点击按钮实现加减操作
在这里插入图片描述
步骤分析：

需要给input标签绑定 input事件，绑定关键字 bindinput
获取输入框的值，通过事件源对象来获取 e.detail.value
把输入框的值赋值到 data当中，注意不能直接赋值，与vue有所区别！通过this.setData进行赋值
点击按钮，需要加入一个点击事件bindtap，
注意：无法在小程序当中的事件中直接传参，通过自定义属性的方式来传递参数，再通过事件源中获取自定义属性

wxml页面

<view>  
  {{num}}
</view>
输入：
<input type="text" bindinput="handleInput" />
<button bindtap="handletap" data-operation="{{1}}" >+</button>
<button bindtap="handletap" data-operation="{{-1}}">-</button>

js文件

Page({
  data: {
    num: 0
  },
  // 输入框的input事件的执行逻辑
  handleInput(e) {
    this.setData({
      num: e.detail.value
    })
  },
  // 加 减 按钮的事件
  handletap(e) {
    // 获取自定义属性 operation
    const operation = e.currentTarget.dataset.operation;
    this.setData({
      num: this.data.num + operation
    })
  }
})

furfur-jiang

发布了128 篇原创文章 · 获赞 52 · 访问量 2万+

私信关注

微信小程序基础而重要语法整理总结（数据绑定、运算表达式、循环渲染、条件渲染、事件绑定（传参））

目录

数据绑定

运算表达式

循环

条件渲染

事件绑定

猜你喜欢