找回密码
 立即注册

扫一扫,访问微社区

查看: 5117|回复: 8

微信小程序数据驱动学习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]

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

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

×

0

主题

9

回帖

150

金钱

新人求带

积分
0
发表于 2017-4-5 22:33:03 | 显示全部楼层
学习学习。啥也不说了,感谢楼主分享哇!

0

主题

40

回帖

268

金钱

新人求带

积分
0
发表于 2017-4-8 15:53:47 | 显示全部楼层
啥也不说了,感谢楼主分享哇!

0

主题

245

回帖

63

金钱

新人求带

积分
0
发表于 2017-8-21 10:49:13 | 显示全部楼层
感谢楼主分享

0

主题

408

回帖

600

金钱

新人求带

积分
0
发表于 2020-4-20 11:09:00 | 显示全部楼层
专注于与个人游戏开发者合作,有产品的朋友联系微,信,号j i m 2 0 1 8 0 6 8 8,详聊

0

主题

1

回帖

6

金钱

新人求带

积分
0
发表于 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

0

主题

440

回帖

1052

金钱

新人求带

积分
0
发表于 2020-4-21 16:37:10 | 显示全部楼层
我有流量,你有产品,我们就可以合作,有意的个人开发者朋友可以联系微信号jim20180688,详聊                                                                                               

0

主题

4

回帖

16

金钱

新人求带

积分
0
发表于 2020-4-22 12:58:37 | 显示全部楼层
Take a look at these resurge review complaints

0

主题

440

回帖

1052

金钱

新人求带

积分
0
发表于 2020-4-22 14:23:09 | 显示全部楼层
我有流量,寻求个人游戏开发者合作,有意者联系微信号jim20180688                                                                                               
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|手机版|小黑屋|微信小程序开发|教程|文档|资源汇总_即速论坛 ( 粤ICP备14097199号-1  

GMT+8, 2024-3-28 21:13 , Processed in 0.123403 second(s), 31 queries .

Powered by Discuz! X3.5

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表