vue 全選與反選的實現(xiàn)方法(無Bug 新手看過來)
更新時間：2018年02月09日 11:25:59 作者：TCorners
下面小編就為大家分享一篇vue 全選與反選的實現(xiàn)方法(無Bug 新手看過來)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
我就廢話不多說，直接上代碼吧！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<div style="padding-left: 20px">
<ul style="margin-bottom: 20px">
<li v-for="(item, index) in proData">
<input type="checkbox" :value="index" v-model="selectArr">{{item.name}}
</li>
</ul>
<label>
<input type="checkbox" @click="selectAll" :checked="checked"/>全選
</label>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
var vm = new Vue({
el : "#app",
data : {
proData: [
{
"name": "張三"
}, {
"name": "李四"
}, {
"name": "王五"
}, {
"name": "趙六"
}
],
selectArr: [],
checked : false
},
watch : {
selectArr(curVal){
if(curVal.length == this.proData.length){
this.checked = true
}else{
this.checked = false
}
}
},
methods: {
selectAll(event){
if (!event.currentTarget.checked) {
this.selectArr = [];
} else { //實現(xiàn)全選
this.selectArr = [];
this.proData.forEach((item, i) =>{
this.selectArr.push(i);
});
}
}
}
})
</script>
</html>
如果有bug，請告知！
以上這篇vue 全選與反選的實現(xiàn)方法(無Bug 新手看過來)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
Vue中@click.stop和@click.prevent實例詳解
當我們使用Vue.js開發(fā)前端應用時,經(jīng)常會在模版中使用@click指令來響應用戶的點擊事件,這篇文章主要給大家介紹了關于Vue中@click.stop和@click.prevent的相關資料,需要的朋友可以參考下2024-04-04
這篇文章主要給大家介紹了關于vue源碼之批量異步更新策略的相關資料，關于vue異步更新是我們日常開發(fā)中經(jīng)常遇到的一個功能，需要的朋友可以參考下2021-05-05
這篇文章主要為大家詳細介紹了Vue組件實現(xiàn)旋轉木馬動畫效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07
Vue Element-ui表單校驗規(guī)則實現(xiàn)
Element-ui表單校驗規(guī)則，使得錯誤提示可以直接在form-item下面顯示，無需彈出框，感興趣的小伙伴們可以參考一下2021-07-07
調度器是vue3響應式系統(tǒng)中一個非常重要的特性，可調度性指的是當trigger 動作觸發(fā)副作用函數(shù)重新執(zhí)行時，有能力決定副作用函數(shù)執(zhí)行的時機、次數(shù)以及方式，本文通過代碼示例給大家介紹調度器是什么，有什么功能，怎么使用,感興趣的同學可以借鑒閱讀2023-06-06
這篇文章主要為大家詳細介紹了vue實現(xiàn)樓層跳轉效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
Vue如何使用ElementUI對表單元素進行自定義校驗及踩坑
有一些驗證不是通過input select這樣的受控組件來觸發(fā)驗證條件的 ,可以通過自定義驗證的方法來觸發(fā),下面這篇文章主要給大家介紹了關于Vue如何使用ElementUI對表單元素進行自定義校驗及踩坑的相關資料,需要的朋友可以參考下2023-02-02
很多朋友經(jīng)常遇到這樣的功能，只允許輸入數(shù)字，允許設置初始值、最大值、最小值，今天小編給大家分享示例代碼給大家介紹vue數(shù)字輸入框功能，感興趣的朋友一起看看吧2020-01-01
Vuejs使用addEventListener的事件如何觸發(fā)執(zhí)行函數(shù)的this
這篇文章主要介紹了Vuejs使用addEventListener的事件觸發(fā)執(zhí)行函數(shù)的this方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要介紹了詳解VUE單頁應用骨架屏方案，詳細的介紹了什么是骨架屏以及是憲法方案，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01