一、插值{{}}语法

        1、内容绑定

<view>{{iptValue}}</view>

        2、属性绑定

<switch checked="{{true}}" />

Page({data: {iptValue: '123'}
})

 

二、简易双向数据绑定

        model:value：支持双向数据绑定

        注：仅input和textarea支持，qie只支持data的一级数据，不支持对象格式的数据绑定

<input type="text" placeholder="请输入内容" model:value='{{iptValue}}'/>

 

三、条件渲染

        1、条件渲染--wx:if & wx:else

        wx:if & wx:else相当于vue中的v-if & v-else；wx:else不可单独使用，需跟在wx:if后使用。

<view class="welcome"><text wx:if="{{ isLogin }}">大师兄</text><text wx:else>游客</text>你好:
</view>

  data: {isLogin: true,}

 

        2、条件渲染--hidden 

        hidden相当于vue中的v-show，当hidden属性值为true时，页面显示，反之，则不显示。

<view class="loading"><text hidden="{{ !loaded }}">正在加载...</text>
</view>

  data: {loaded: true}

 

 四、列表渲染

        1、wx:for循环列表

        默认index和item是数组访问变量（index是索引，item是数组项）。

        注意：wx:key未指定值会有警告，使用时不使用插值语法，访问对象为对象时，只用写属性名。

<view class="students"><view class="item"><text>序号</text><text>姓名</text><text>年龄</text><text>性别</text><text>级别</text></view><view class="item" wx:for="{{students}}" wx:key="id"><text>{{item.id}}-{{index}}</text><text>{{item.name}}</text><text>{{item.age}}</text><text>{{item.gender}}</text><text>{{item.level}}</text></view>
</view>

data: {students: [{ id: 1, name: '贺洋', age: 20, gender: '男', level: '菜鸟' },{ id: 2, name: '唐刚', age: 18, gender: '女', level: '笨鸟' },{ id: 3, name: '常超', age: 20, gender: '女', level: '老鸟' },],}

 

        2、wx:for循环简单数组

        注意：wx:key未指定值会有警告，使用时不使用插值语法，访问对象为简单单元时，使用“*this”

<view class="history"><text wx:for="{{history}}" wx:key="*this">{{item}}</text>
</view>

data: {history: ['苹果', '华为', 'OPPO', '三星'],}

 

        3、wx:for 的item和index改名

        wx:for 嵌套时 item 和 index需要修改名称，防止命名重复，取值错误。

        语法：wx:for-item='名称'

                   wx:for-index='名称'

<view class="students"><view class="item"><text>序号</text><text>姓名</text><text>年龄</text><text>性别</text><text>级别</text></view><view class="item" wx:for="{{students}}" wx:key="id" wx:for-item='stu' wx:for-index='idx'><text>{{stu.id}}-{{idx}}</text><text>{{stu.name}}</text><text>{{stu.age}}</text><text>{{stu.gender}}</text><text>{{stu.level}}</text></view>
</view>