Maison > Article > interface Web > L'utilisation de composants de cases à cocher dans les mini-programmes WeChat

L'utilisation de composants de cases à cocher dans les mini-programmes WeChat

亚连original: 2018-06-08 16:14:331955parcourir

Cet article présente principalement l'utilisation du composant case à cocher du mini programme WeChat, qui a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

Cet article partage l'utilisation du composant case à cocher du mini programme WeChat. programme. Méthode, pour votre référence, le contenu spécifique est le suivant

Rendu

Lutilisation de composants de cases à cocher dans les mini-programmes WeChat

WXML

<view class="tui-content">
 <checkbox-group bindchange="checkboxChange">
 <label class="checkbox" wx:for="{{items}}">
  <view class="tui-menu-list"><checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}</view>
 </label>
 </checkbox-group>
 <view class="tui-show-name">
 <text wx:for="{{checkArr}}"> {{item}} </text>
 </view>
</view>

Page({
 data: {
 items: [
  { name: &#39;USA&#39;, value: &#39;美国&#39; },
  { name: &#39;CHN&#39;, value: &#39;中国&#39;, checked: &#39;true&#39; },
  { name: &#39;BRA&#39;, value: &#39;巴西&#39; },
  { name: &#39;JPN&#39;, value: &#39;日本&#39; },
  { name: &#39;ENG&#39;, value: &#39;英国&#39; },
  { name: &#39;TUR&#39;, value: &#39;法国&#39; },
 ],
 checkArr: [&#39;中国&#39;]
 },
 checkboxChange: function (e) {
 var arr = [];
 e.detail.value.forEach(current => {
  for (var value of this.data.items){
  if(current === value.name){
   arr.push(value.value);
   break;
  } 
  }
 });
 this.setData({checkArr: arr});
 }
})

Résumé

Puisque e.detail.value et this.data.items sont tous deux des éléments de tableau pour la comparaison et la recherche d'attributs, une double boucle est utilisé ici.
La boucle forEach ne peut pas sortir de la boucle, donc lorsque vous bouclez this.data.items, utilisez for...of...

Ce qui précède est ce que j'ai compilé. Pour tout le monde, j'espère que cela sera utile à tout le monde à l'avenir.

Articles Liés

Voir plus