怎么在vue中利用監聽實現全選反選功能
本篇文章給大家分享的是有關怎么在vue中利用監聽實現全選反選功能，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
10年積累的成都做網站、網站制作經驗，可以快速應對客戶對網站的新想法和需求。提供各種問題對應的解決方案。讓選擇我們的客戶得到更好、更有力的網絡服務。我雖然不認識你，你也不認識我。但先網站設計后付款的網站建設流程，更有新和免費網站建設讓你可以放心的選擇與我們合作。
首先定義數據
data: {
/*全選、全不選*/
allCheck:false,//全選功能
//循環數據
checkArr:[
{cityName:"東城區",isCheck:false},
{cityName:"西城區",isCheck:false},
{cityName:"朝陽區",isCheck:false},
{cityName:"豐臺區",isCheck:false},
],
}
然后是頁面代碼：
全選
下面是js中代碼
methods: {
/*點擊全選，選中所有復選框*/
selectAll: function (data) {
var _this = this;
//如果父級被選中，那么子集循環，全被給checked=true
if (!data) {
_this.checkArr.forEach(function (item) {
item.isCheck = true;
});
} else {
//相反，如果沒有被選中，子集應該全部checked=false
_this.checkArr.forEach(function (item) {
item.isCheck = false;
});
}
},
}
下面是監聽部分代碼，主要功能為如果子集全部選中，全選按鈕同樣被勾選
watch:{
/*監聽全選事件*/
checkArr:{
handler(value){
var _this = this;
var count=0;
for(var i=0;i
vue是什么
Vue是一套用于構建用戶界面的漸進式JavaScript框架，Vue與其它大型框架的區別是，使用Vue可以自底向上逐層應用，其核心庫只關注視圖層，方便與第三方庫和項目整合，且使用Vue可以采用單文件組件和Vue生態系統支持的庫開發復雜的單頁應用。
以上就是怎么在vue中利用監聽實現全選反選功能，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注創新互聯行業資訊頻道。
網頁標題：怎么在vue中利用監聽實現全選反選功能
標題來源：http://m.jcarcd.cn/article/iisipd.html
