微信小程序 | 数据绑定、运算和循环

2021-05-07
658字
2分钟

微信小程序的语法基础

模版语法

数据绑定

普通写法

text标签相当于span标签:行内元素

view标签相当于div标签:块级元素

数据绑定

.js文件

Page({
    data: {
        msg: "hello",
        num: 10000,
        person:{
            age:74,
            height:176,
            name:"Paul"
        },
        isChecked:false
    }
})

.wxml文件

<view> {{msg}} </view>
<view> {{person.age}} </view>
<view data-num="{{num}}" > 自定义属性 </view>
<view>
    <checkbox checked="{{isChecked}}" >  </checkbox>
    <!--引号与括号间不能有空格-->
</view>

运算

可已在花括号中加入一些表达式

<!--数字运算-->
<view> {{1+1}} </view>
<!--字符串拼接-->
<view> {{'1'+'1'}} </view>
<!--三目表达式-->
<view> {{ 10%2===0 ? '偶数' : '奇数'}} </view>
<!--三个’=’是严格等于,即值相等,数据类型也相等-->

列表渲染

wx:for

项的变量名默认为item wx:for-item可移指定当前元素的变量名

下标变量名默认为index wx:for-index可以指定当前下标的变量名

.js

list:[
    {
        id:0,
        name:"A"
    },
    {
        id:1,
        name:"B"
    },
    {
        id:2,
        name:"C"
    }
]
person:{
    age:74,
    height:176,
    name:"Paul",
    id=1234
}

.wxml

<!--
  列表循环
    1 wx:for="{{数组或对象}}" 
      wx:for-item="循环项的名称" 
      wx:for-index="索引项的索引"
    2 wx:key="唯一的值" 提高渲染性能
      使用主键或 *this
    3 循环嵌套时,名称不要重复(index,item)
    4 wx:for-item="item" wx:for-index="index"是默认值,可以不写(无嵌套时)
-->
<view> 
    <view wx:for="{{list}}" wx:for-item="item" wx:for-index="index"> 
        索引:{{index}}
        --
        值:{{item.name}}
    </view>
</view>

对象循环

<!--wx:for-item="value" wx:for-index="key"
为了便于识别对象-->
<view> 
    <view> 对象循环 </view>
    <view
        wx:for="{{person}}"
        wx:for-item="value" 
        wx:for-index="key"
        wx:key="id">
        属性:{{value}}
        --
        值:{{key}}
    </view>
</view>
Avatar
Zhang.Mathias 巧者劳而智者忧,无能者无所求,饱食而遨游,泛若不系之舟