您好,登錄后才能下訂單哦!
這篇文章給大家介紹怎么在Vue.js中利用checkbox實現(xiàn)一個全選反選效果,內(nèi)容非常詳細(xì),感興趣的小伙伴們可以參考借鑒,希望對大家能有所幫助。
html示例代碼
<template> <div> <input type='checkbox' class='input-checkbox' v-model='checked' v-on:click='checkedAll'>全選 <template v-for='checkb in checkboxData'> <input type='checkbox' name='checkboxinput' class='input-checkbox' v-model='checkboxModel' value='{{checkb.id}}'>{{checkb.value}} </template> </div> </template>
js示例代碼
<script> export default { methods:{ checkedAll: function() { var _this = this; console.log(_this.checkboxModel); if (this.checked) {//實現(xiàn)反選 _this.checkboxModel = []; }else{//實現(xiàn)全選 _this.checkboxModel = []; _this.checkboxData.forEach(function(item) { _this.checkboxModel.push(item.id); }); } } }, watch: {//深度 watcher 'checkboxModel': { handler: function (val, oldVal) { if (this.checkboxModel.length === this.checkboxData.length) { this.checked=true; }else{ this.checked=false; } }, deep: true } }, data () { return { checkboxData:[{ id:'1', value:'蘋果' },{ id:'2', value:'荔枝' },{ id:'3', value:'香蕉' },{ id:'4', value:'火龍果' }], checkboxModel:['1','3','4'], checked:"" } } } </script>
watch
類型: Object
詳細(xì):
一個對象,鍵是觀察表達(dá)式,值是對應(yīng)回調(diào)。值也可以是方法名,或者是對象,包含選項。在實例化時為每個鍵調(diào)用 $watch()
。
示例:
var vm = new Vue({ data: { a: 1 }, watch: { 'a': function (val, oldVal) { console.log('new: %s, old: %s', val, oldVal) }, // 方法名 'b': 'someMethod', // 深度 watcher 'c': { handler: function (val, oldVal) { /* ... */ }, deep: true } } }) vm.a = 2 // -> new: 2, old: 1
關(guān)于怎么在Vue.js中利用checkbox實現(xiàn)一個全選反選效果就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,可以學(xué)到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。