signed

QiShunwang

“诚信为本、客户至上”

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

2021/1/28 17:10:47   来源:

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