欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

利用Vue.js實(shí)現(xiàn)checkbox的全選反選效果

 更新時間：2017年01月18日 15:24:58   作者：愛喝酸奶的吃貨  
最近用vue做了兩個項(xiàng)目，都需要實(shí)現(xiàn)全選反選的功能，所以想著記錄下分享給大家，方便自己或者有需要的朋友們參考講學(xué)習(xí)，所以下面這篇文章主要介紹了利用Vue.js實(shí)現(xiàn)checkbox的全選反選效果,需要的朋友可以一起來學(xué)習(xí)學(xué)習(xí)。

前言

這篇文章主要是跟大家分享了利用Vue.js實(shí)現(xiàn)checkbox的全選反選效果，之前寫的代碼存在一個bug,就是當(dāng)你選擇全選的時候去掉后面的一個選項(xiàng)，再點(diǎn)全選結(jié)果就是反的了。后來很感謝朋友留言幫我改了這個問題嘻嘻,下面一起來看看具體是怎么實(shí)現(xiàn)的吧.

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) {//實(shí)現(xiàn)反選
 _this.checkboxModel = [];
 }else{//實(shí)現(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)。值也可以是方法名，或者是對象，包含選項(xiàng)。在實(shí)例化時為每個鍵調(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

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。

相關(guān)文章

最新評論