微信小程序-声明和绑定事件

一.概念

小程序页面使用的数据在Page（）方法里使用data对象进行声明定义
定义好之后，使用{{}}进行绑定
声明

Page({
  data:{
    school:'未发之中',
    obj:{
      name:'dadada'
    },
    id:1,
    useChk:true
  }

})

绑定

<!-- 使用双括号展示数据 -->
<view>{{school}}</view>
<view>{{obj.name}}</view>

<!-- 绑定属性值 -->
<view id="{{id}}">绑定</view>
<checkbox checked="{{ useChk }}" />

显示效果

{{}}里面可以进行如下运算

<!-- 运算 -->
<view>{{id+1}}</view>

<view>{{id===1?true:false}}</view>

<view>{{id===1}}</view>

二.setData({})的使用

setData有两个作用：
1.更新数据
2.驱动视图更新
定义data数据：

  data:{
    num:1,
  }

view里面绑定数据

<view>{{num}}</view>
<button bind:tap="onClick">按钮</button>

点击按钮，num+1，通过setData实现

  onClick(){
    //获取数据
    const num=this.data.num+1
    this.setData({
      num:num
    })

三. 对绑定的对象的数据元素进行增删改

定义data

  data:{
    userInfo:{name:'test',age:20},
  }

增改的代码一样

//新增和修改
      this.setData({
        'userInfo.name':'test'
      })

删除

 //删除
      //delete this.data.userInfo.age
      this.setData({
        userInfo:this.data.userInfo
      })
      //多个删除
      const {age,...rest} = this.data.userInfo
      this.setData({
        userInfo:rest
      })

多个修改

      //多个修改
      const list=Object.assign(this.data.userInfo,{name:'du'},{age:18})
      this.setData({
        userInfo:list
      })
      const listD={
        ...this.data.userInfo,
        name:'jjj',
        age:33
      }
      this.setData({
        userInfo:listD
      })

四.对绑定数据的增删改

定义data

  data:{
    list:[1,2,3]
  }

新增

    //新增
    this.data.list.push(4)
    this.setData({
      list:this.data.list
    })
    const newList=this.data.list.concat(4)
    this.setData({
      list:newList
    })
    const list2=[...this.data.list,4]
    this.setData({
      list:list2
    })

修改

   this.setData({
      'list[3]':0
    })

删除

    this.data.list.splice(4)
    this.setData({
      list:this.data.list
    })
    const list3=this.data.list.filter(item=>item!==1)
    this.setData({
      list:list3
    })