wx:for
属性
作用:列表循环,可循环:数组、对象。
代码如下:
数组循环,需要注意的是如果是纯数组或者是字符串组成的数组,wx:for="*this"
<view wx:for="{{list}}" wx:for-item="pa" wx:key="keyvalue">
索引:{{index}}--
值:{{pa.name}}--
关键值:{{pa.keyvalue}}
</view>
list:[
{
id:0,
name:"张三",
keyvalue:2
},
{
id:1,
name:"李四",
keyvalue:2
},
{
id:2,
name:"王五",
keyvalue:2
}
],
对象循环
<view wx:for="{{Obj}}" wx:key="order">
{{index}}--{{item}}
</view>
<checkbox checked="{{Obj.isAlive}}">是否存活:</checkbox>
Obj:{
name:"张三",
age:21,
hobby:"EGame",
isAlive:true,
order:0
},
Obj1:{
name:"李四",
age:88,
hobby:"work",
isAlive:true,
order:1
},
条件渲染
wx:if //直接将元素从页面结构中删除,频繁使用耗费性能
hidden //通过给元素加上display:none的属性来隐藏
//hidden属性不能与其他display属性同时使用,否则会覆盖失效。
事件绑定
Eg:
1、给input标签绑定input事件,绑定关键字bindinput
2、用e.detail.value
获取input的值
3、将输入框的值赋值到data当中,this.data.num=e.detail.value
和this.num=e.detail.value
这两种写法都是错误的,应该用this.setData({num:e.detail.value})
<input type="text" bindinput="handleInput" />
<view>{{num}}</view>
data: {
num:0
},
handleInput(e) {
// console.log(e.detail.value);
this.setData({
num: e.detail.value
})
}