【微信小程序】wxml模板

数据绑定

<!-- index.wxml -->
<view >
    <text >hello,</text>
    <text data-title="{{title}}">{{name}}</text>
    <view >{{"welcome " + name}}</view>
</view>

// index.js
Page({
    data:{
        name:"Nicholas",
        title:"名字"
    }
})

条件渲染

• wx:if="{{}}" | wx:else

<!-- index.wxml -->
<view >
    <view wx:if="{{num>50}}">{{num}}大于50</view>
    <view wx:else>{{num}}小于等于50</view>
</view>

// index.js
Page({
    data:{
        num:Math.floor(Math.random()*100+1)
    }
})

• wx:if="{{}}" | wx:elif="{{}}" | wx:else

<!-- index.wxml -->
<view >
    <view wx:if="{{num<20}}">{{num}}小于20</view>
    <view wx:elif="{{num>20 && num<80}}">{{num}}大于20且小于80</view>
    <view wx:else>{{num}}大于等于80</view>
</view>

// index.js
Page({
    data:{
        num:Math.floor(Math.random()*100+1)
    }
})

列表渲染

• index | item

<!-- index.wxml -->
<view wx:for="{{todos}}">
    {{index}}-{{item.title}}
</view>

// index.js
Page({
    data:{
        todos:[
            {title:"吃饭"},
            {title:"睡觉"},
            {title:"打豆豆"}
        ]
    }
})

其中，数组下标默认是index，数组项默认是item。

• 自定义变量名，idx | todoItem

<view wx:for="{{todos}}" wx:for-index="idx" wx:for-item="todoItem">
    {{idx}}-{{todoItem.title}}
</view>

wx:for-index="idx"，index指定为idx；wx:for-item="todoItem"，item指定为todoItem。

• wx:key="title"
  数组中的元素是对象， wx:key的值是对象的一个属性，且该属性值是字符串或数值。

<!-- index.wxml -->
<switch wx:for="{{todos}}" wx:key="title" >{{item.title}}</switch>
<button bindtap="addTodoItem">Add</button>

// index.js
Page({
    data:{
        todos:[
            {title:"吃饭"},
            {title:"睡觉"},
            {title:"打豆豆"}
        ]
    },
    addTodoItem:function(){
        const newTodoItem = {
            title:"需求开发"
        };
        this.data.todos = [newTodoItem].concat(this.data.todos);
        this.setData({
            todos:this.data.todos
        })
    }
})

wx:key用来唯一标识列表中的每项，和React里key的性质差不多。
当需要在列表最前面添加新项时，小程序只会创建新项，列表中的已有项则不会经历重建过程，只会重新排序。

• wx:key="*this"
  数组中的元素是字符串或数值，this代表了元素自身。

<!-- index.wxml -->
<switch wx:for="{{words}}" wx:for-item="word" wx:key="*this" >{{word}}</switch>
<button bindtap="AddWord">Add</button>

// index.js
Page({
    data:{
        words:["foo","bar"]
    },
    AddWord:function(){
        this.data.words = ["hello"].concat(this.data.words);
        this.setData({
            words:this.data.words
        })
    }
})

本文地址：https://blog.csdn.net/qzw752890913/article/details/109214619