微信小程序学习笔记(数组和对象循环、条件渲染、事件绑定)

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
    })
  }