小程序总结

1. 获取input的值
// html
/**
https://developers.weixin.qq.com/miniprogram/dev/component/input.html
*/
<input type='text' placeholder="请输关键字" value="{{keyword}}" bindinput="getKeyword" />
// js
Page({
  data: {
    keyword: '输入框的初始内容',
  },
  getKeyword: (e) {
      this.setData({
        keyword: e.detail.value
      })
  }
})

// 2. 循环数据 / 动态class
// html
/**
  {{item.check?'blue':''}} 类似于vue中的 :class
   data-item 格式为 data-****  ，也可以是 data-index 等等
*/
<view wx:for="{{items}}" wx:key="index" class="{{item.check?'blue':''}}" data-item="{{item}}" bindtap="select">{{item.name}}</view>
// css
.blue{
  color:blue
}
// js
Page({
  data: {
    items: [{name:'张三',id:1,check:false},{name:'李四',id:2,check:false}],
  },
  select: (e) {
    let data = e.currentTarget.dataset.item; // 当前列表
    let items = this.data.items;
    items.forEach(element => {
      element.check = false;
      if (element.name === item.name) {
        element.check = true;
      }
    });
     this.setData({
      items: items
    });
  }
})