今回は、vue チェックボックス データのバインド、取得、計算方法に関する記事を共有します。非常に参考になるので、皆さんのお役に立てれば幸いです。
html
<input type='checkbox' v-model='checkboxModel' :value='z.coach_id+"-"+z.amount' :i="dianji" @click="lll">
最初のチェックボックス
<span><input type='checkbox' v-model='checked' v-on:click='checkedAll'><span class="select-all">全选</span></span>
2番目
定義
return { dianji:'12', list: [], value:{}, value1:{}, checkAll: false, checkArr:[], checkboxModel:[], wodeshi:'0', checked:false } lll: function(){ var self = this; var sum=0; setTimeout(function(){ for(var x in self.checkboxModel){ sum += parseInt(self.checkboxModel[x].split('-')[1]) } self.wodeshi=sum; },0) // console.log(self.checkboxModel) }, checkedAll: function() { var _this = this; if (this.checked) {//实现反选 _this.checkboxModel = []; }else{//实现全选 _this.checkboxModel = []; _this.list.forEach(function(z) { _this.checkboxModel.push(z.coach_id+'-'+z.amount); }); } if(_this.checkboxModel.length==0){ this.wodeshi=0; // console.log(_this.checkboxModel); }else { var self =this; var sum =0; for(var x in self.checkboxModel){ sum += parseInt(self.checkboxModel[x].split('-')[1]) } self.wodeshi=sum; } },
上記は私が皆さんのためにまとめたものです。誰にとっても役立ちます。
関連記事:
vue-prop で親コンポーネントを使用して子コンポーネントに値を渡す方法
Cheerio を使用して Node.js で単純な Web クローラーを作成する (詳細なチュートリアル)
vue での方法複数のデータを子コンポーネントに渡す親コンポーネントを実装します
以上がvue でデータ バインディングと取得を実装するには、すべてを選択しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。