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

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

[mw_shl_code=html,true]// 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 () {
// 页面关闭
  }
})[/mw_shl_code]

[mw_shl_code=html,true]<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>[/mw_shl_code]

游客，如果您要查看本帖隐藏内容请回复

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

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：实现双向绑定

本帖子中包含更多资源

Take a look at these resurge supplement reviews 2020