vue實現(xiàn)全選和反選功能
更新時間：2017年08月31日 14:54:44 作者：mystraight
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)全選和反選功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue實現(xiàn)全選反選功能的具體代碼，供大家參考，具體內(nèi)容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script type="text/javascript" src = "vue.js"></script>
<body>
<div id = "test">
<input type='checkbox' v-model="checkBox.checked" class='input-checkbox' @click='checkedAll'>全選
<div v-for='checkb in checkboxData'>
<input type='checkbox' class='input-checkbox' @click="checkItem" v-model='checkBox.items[checkb.id]'>
{{checkb.value}}
</div>
</div>
</body>
<script>
var vue = new Vue({
el:"#test",
data:{
checkboxData:[
{
id:'1',
value:'蘋果'
},{
id:'2',
value:'荔枝'
},{
id:'3',
value:'香蕉'
},{
id:'4',
value:'火龍果'
}
],
checkBox:{
checked:false,
items:{}
}
},
methods:{
checkedAll: function() {
var _this = this;
console.log(_this.checkboxData);
console.log(this.checkBox.items);
this.checkboxData.forEach(function (item) {
console.log(item.id);
_this.checkBox.items[item.id] = _this.checkBox.checked;
console.log(_this.checkBox.items);
});
//實現(xiàn)反選
},
checkItem:function(){
var unchecked = 0;
var _this = this;
this.checkboxData.forEach(
function(item) {
unchecked += (! _this.checkBox.items[item.id]) || 0;
});
_this.checkBox.checked = unchecked > 0 ? false : true;
}
}
})
</script>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue-cli中的webpack是如何配置的，本篇文章主要是分析vue中關(guān)于config文件夾中的相關(guān)代碼，config的文件結(jié)構(gòu)，感興趣的朋友參考下本文2018-01-01
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)列表無縫循環(huán)滾動，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
vue實現(xiàn)的雙向數(shù)據(jù)綁定操作示例
這篇文章主要介紹了vue實現(xiàn)的雙向數(shù)據(jù)綁定操作,結(jié)合完整實例形式較為詳細(xì)的分析了vue.js進行數(shù)據(jù)雙向綁定操作的常見實現(xiàn)方法與相關(guān)操作技巧,需要的朋友可以參考下2018-12-12
基于Echarts圖表在div動態(tài)切換時不顯示的解決方式
這篇文章主要介紹了基于Echarts圖表在div動態(tài)切換時不顯示的解決方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
當(dāng)你跑起一個項目的時候,第一步需要先安裝依賴npm install,下面這篇文章主要給大家介紹了關(guān)于npm?install安裝報錯的幾種常見情況,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
這篇文章主要給大家介紹了關(guān)于如何在Vue中配置代理服務(wù)器的相關(guān)資料,文中通過圖文以及示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了vue-pdf打包后無法預(yù)覽問題及修復(fù)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
vue?cli2?和?cli3去掉eslint檢查器報錯的解決
這篇文章主要介紹了vue?cli2?和?cli3去掉eslint檢查器報錯的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue3配置axios跨域?qū)崿F(xiàn)過程解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-11-11
Vue+Element-ui彈窗?this.$alert?is?not?a?function問題
這篇文章主要介紹了Vue+Element-ui彈窗?this.$alert?is?not?a?function問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10