一、插值{{}}语法
1、内容绑定
html
<view>{{iptValue}}</view>
2、属性绑定
html
<switch checked="{{true}}" />
javascript
Page({
data: {
iptValue: '123'
}
})
二、简易双向数据绑定
model:value:支持双向数据绑定
注:仅input和textarea支持,qie只支持data的一级数据,不支持对象格式的数据绑定
html
<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后使用。
html
<view class="welcome">
<text wx:if="{{ isLogin }}">大师兄</text>
<text wx:else>游客</text>你好:
</view>
javascript
data: {
isLogin: true,
}
2、条件渲染--hidden
hidden相当于vue中的v-show,当hidden属性值为true时,页面显示,反之,则不显示。
html
<view class="loading">
<text hidden="{{ !loaded }}">正在加载...</text>
</view>
javascript
data: {
loaded: true
}
四、列表渲染
1、wx:for循环列表
默认index和item是数组访问变量(index是索引,item是数组项)。
注意:wx:key未指定值会有警告,使用时不使用插值语法,访问对象为对象时,只用写属性名。
html
<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>
javascript
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"
html
<view class="history">
<text wx:for="{{history}}" wx:key="*this">{{item}}</text>
</view>
javascript
data: {
history: ['苹果', '华为', 'OPPO', '三星'],
}
3、wx:for 的item和index改名
wx:for 嵌套时 item 和 index需要修改名称,防止命名重复,取值错误。
语法:wx:for-item='名称'
wx:for-index='名称'
html
<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>