微信小程序复选框组件使用详解

　　

本文为大家分享了微信小程序复选框组件的使用方法,供大家参考,具体内容如下

　　

效果图 　　

微信小程序复选框组件使用详解

　　

WXML 　　 　　 　　& lt;视图类=皌ui-content”比; 　　& lt;复选框组bindchange=癱heckboxChange”比; 　　& lt;标签类=案囱】颉钡奶炱?为=皗{物品}}”比; 　　& lt;视图类=" tui-menu-list "祝辞& lt;复选框value=" https://www.yisu.com/zixun/{{item.name}} "=" {{item.checked}} "/检查在{{item.value}} & lt;/view> 　　& lt;/label> 　　& lt;/checkbox-group> 　　& lt;视图类=皌ui-show-name”比; 　　& lt;文本wx:=" {{checkArr}}”在{{项}}& lt;/text> 　　& lt;/view> 　　& lt;/view> 　　之前 　　 　　JS

　　 　　 　　页面({ 　　数据:{ 　　项目:( 　　{名称:“美国”,价值:“美国”}, 　　{名称:“中文”,价值:“中国”,检查:“真正的”}, 　　{名称:“胸罩”,价值:“巴西”}, 　　{名称:“日本”,价值:“日本”}, 　　{名称:“ENG”,价值:“英国”}, 　　{名称:“病重”,价值:“法国”}, 　　), 　　checkArr:['中国'] 　　}, 　　checkboxChange:函数(e) { 　　var arr=[]; 　　e.detail.value.forEach(当前=比;{ 　　(var值this.data.items) { 　　如果(当前===value.name) { 　　arr.push (value.value); 　　打破; 　　} 　　} 　　}); 　　这一点。setData ({checkArr: arr}); 　　} 　　}) 　　 　　

<强>总结

　　
    　　<李>由于e.detail.value和this.data.items都是数组元素进行属性对比查找,所以此处采用了双循环。 　　<李> forEach循环不能在循环中跳出,所以在循环this.data.items时采用的…… 　　
　　

演示下载 　　

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

微信小程序复选框组件使用详解