数据双向绑定

  1. 小程序没有v-model
  2. 绑定方法 bindinput=""
  3. 获取数据 e.detail.value ```javascript //Dom {{textVal}}

//方法 hdipt(e){ console.log(e.detail.value); this.setData({ textVal:e.detail.value }) },

  1. <a name="tugNF"></a>
  2. # 事件传参 & 获取
  3. ps: 
  5. 1. click事件有延迟一般用于PC端, 移动端一般用tab事件代替
  6. 1. val为key
  7. 1. `data-val='{{123}}'` 这样写能控制value的类型
  9. 传参 : `<button bindtap='selectCity' data-val='123'>按钮</button>`<br />获取 : `e.currentTarget.dataset.val`
  10. <a name="PgXFx"></a>
  11. # wx:for - 数据渲染
  13. 1. wx:for
  14. 1. wx:key
  15. 1. wx:for-item : 改变默认的item 提高可读性
  16. ```html
  18. data: {
  19.     arr1:['Dan','Jim','Amanda'],
  20.     arr2:[
  21.         { name:'IV',hobby:['A','B',"C"]},
  22.         { name:'Mouse',hobby:['D','E',"F"]}
  23.     ]
  24. },
  26. <!-- 一维数组渲染 -->
  27. <view wx:for="{{arr1}}" wx:key="index">{{item}}</view>
  28. <!-- 二维数组渲染 -->
  29. <view wx:for="{{arr2}}" wx:key="index">
  30.     {{item.name}} 
  31.     hobby:<text wx:for="{{item.hobby}}" wx:key="index" wx:for-item='hob'>{{hob}}</text>
  32. </view>

数组&对象数据修改

中括号加字符串的形式进行修改引用类型数据

data: {
  name:'222',
    arr1:['Dan','Jim','Amanda'],
    arr2:[
      { name:'IV',hobby:['A','B',"C"]},
      { name:'Mouse',hobby:['D','E',"F"]}
    ]
},
//修改数据
setMyData(){
  this.setData({
    ['arr1[0]']:this.data.arr2[0].name,
    ['arr2[1].name']:'papi',
    ['arr2[1].hobby[2]']:'GG',
  })
},

wx:if & hidden - 条件渲染

基本于vue逻辑一样

  1. wx:if
  2. wx:elif
  3. wx:else
  4. hidden 与v-show相反

image.png