咫尺论坛 › 微信小程序开发教程 › 微信小程序数据驱动学习demo：实现双向绑定

柿霖不是林 发表于 2017-2-24 17:24:16

微信小程序数据驱动学习demo：实现双向绑定

// pages/select/select.js
Page({
data: {
    fruits: [
      { value: '西瓜', checked: 'true' },
      { value: '香蕉', checked: 'true' },
      { value: '苹果' },
      { value: '梨子' },
      { value: '猕猴桃' },
      { value: '哈密瓜' },
      { value: '草莓' },
    ],
    selected: []
},
checkboxChange: function (e) {
    // console.log('checkbox发生change事件，携带value值为：', e.detail.value);
    let fruits = this.data.fruits;
    let sel_fruits = e.detail.value; // 拿到选中的水果
    let arr = [];
    sel_fruits.forEach(function (i) {
      arr.push(fruits.value);
    });
    this.setData({
      selected: arr
    });
},
onLoad: function (options) {
    // 初始化选中的水果
    let fruits = this.data.fruits;
    let arr = [];
    for (let i = 0; i < fruits.length; i++) {
      if (fruits.checked) {
      arr.push(fruits.value);
      // 通知data更新，DOM层自动重新渲染
      this.setData({
          selected: arr
      });
      }
    }
},
onReady: function () {
    // 页面渲染完成
},
onShow: function () {
    // 页面显示
},
onHide: function () {
    // 页面隐藏
},
onUnload: function () {
    // 页面关闭
}
})


<view class="content">
<view class="select-wrap">
    <checkbox-group bindchange="checkboxChange">
      <label class="checkbox" wx:for="{{fruits}}">
      <checkbox value="{{index}}" checked="{{item.checked}}" />{{item.value}}
      </label>
    </checkbox-group>
</view>
<view class="show-wrap">
    <view class="show-list">
      <text>你最喜欢吃的水果是：</text>
      <view class="show-item" wx:for="{{selected}}">
      <text>{{item}}</text>
      </view>
    </view>
    <button class="edit" type="default">编辑</button>
</view>
</view>

**** Hidden Message *****

kenwork 发表于 2017-4-5 22:33:03

学习学习。啥也不说了，感谢楼主分享哇！

lyj4532556 发表于 2017-4-8 15:53:47

啥也不说了，感谢楼主分享哇！

Ywenli 发表于 2017-8-21 10:49:13

感谢楼主分享

jack56846 发表于 2020-4-20 11:09:00

专注于与个人游戏开发者合作，有产品的朋友联系微,信,号j i m 2 0 1 8 0 6 8 8，详聊

NellyVape 发表于 2020-4-21 02:17:25

Take a look at these resurge supplement reviews 2020

jack56846 ??? 2020-4-20 11:09
?????????????,?????????,?,?j i m 2 0 1 8 0 6 8 8,??
...

Take a look at these resurge review complaints

jackjack417 发表于 2020-4-21 16:37:10

我有流量，你有产品，我们就可以合作，有意的个人开发者朋友可以联系微信号jim20180688，详聊                                                                                               

森木 发表于 2020-4-22 12:58:37

Take a look at these resurge review complaints

jackjack417 发表于 2020-4-22 14:23:09

我有流量，寻求个人游戏开发者合作，有意者联系微信号jim20180688                                                                                               

查看完整版本: 微信小程序数据驱动学习demo：实现双向绑定