js数据操作

1.数据绑定

WXML中部分数据来自JS中的data

1.1 js中设置数据

data: {
  myName:"123",
  title:"weixin",
  content:"123000",
  arr:["str","lwx"],//数组
  // 对象
  obj:{name:"lwx",age:18},
  day:3,
  objarr:[
    {name:"lwx",age:18},
    {name:"lll",age:22},
    {name:"syyy",age:55}
  ]
},

1.2 使用

<view>
  <!-- 数据绑定 js中的data -->
  {{title}}
  {{content}}
  {{arr[0]}}
  {{obj.name}}
  {{objarr[0].name}}
</view>

2.列表渲染

1.可以嵌套循环
2.单层循环可以只写wx:for={{}}
3. wx：for 绑定数组
wx:for-item 可以指定数组当前元素的变量名
wx:for-index 可以指定数组当前下标的变量名
4.wx:key
如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 input 中的输入内容，switch 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。
wx:key 的值以两种形式提供

• 字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
• 保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。
  静态的话不需要 忽略警告即可

2.1 使用

js中的数据

objarr:[
      {name:"lwx",age:18},
      {name:"lll",age:22},
      {name:"syyy",age:55}
    ],
    list1:[
      {msg:"qqqq"},
      {msg:"wwww"},
      {msg:"eeee"}
    ],
    list2:[
      {name:"qqqq"},
      {name:"wwww"},
      {name:"eeee"}
    ]

wxml中

<!-- index下标 item元素值 -->
<view wx:for="{{list1}}">
  {{index}}---{{item.msg}}
</view>
<view wx:for="{{list2}}" wx:for-index="i" wx:for-item="item">
    下标：{{i}}----{{item.name}}
</view>
<view wx:for="{{arr}}" wx:key="*this">
{{index}} {{item}}
</view>
<view wx:for="{{objarr}}" wx:key="index">
{{item.name}}  {{item.age}}
</view>

3.条件渲染

<!-- if和else必须靠在一起 -->
<view wx:if="{{day==1}}">0000</view>
<view wx:elif="{{day==2}}">1111</view>
<view wx:elif="{{day==3}}">2222</view>
<view wx:else>4444</view>

还可以使用block标签

<!-- block只起包装作用 -->
<block wx:if="{{true}}">
  <view>11111</view>
  <view>22222</view>
</block>
<block wx:else>
  <view>333333</view>
</block>

4.事件绑定

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html#%E4%BA%8B%E4%BB%B6%E8%AF%A6%E8%A7%A3

4.1 bindtap点击事件

在标签属性内添加data-id="{{item.goods_id}}"属性，来向绑定的方法传递数据，通过方法的e.currentTarget.dataset.id获取 。

<view>{{ msg }}</view>
<button bindtap="clickMe">点击我</button>

 clickMe: function(event) {
    this.setData({ msg: "Hello World" });
    console.log(event);
  }