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 新手看過來)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
下面小編就為大家分享一篇vue2.0路由切換后頁面滾動位置不變BUG的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
自定義指令是?Vue.js?中一個強大的特性,它允許您擴展?Vue?的模板語法,本文將詳細介紹?Vue?3?中的自定義指令,包括如何創(chuàng)建它們以及如何將它們應(yīng)用于您的應(yīng)用程序,需要的可以參考下2023-11-11
這篇文章主要介紹了uniapp的生命周期,應(yīng)用生命周期是指應(yīng)用程序從啟動到關(guān)閉的整個過程，包括應(yīng)用程序的啟動、前后臺切換、退出等,需要的朋友可以參考下2023-04-04
vue使用JSEncrypt對密碼本地存儲時加解密的實現(xiàn)
本文主要介紹了vue使用JSEncrypt對密碼本地存儲時加解密，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
這篇文章主要介紹了vue 授權(quán)獲取微信openId操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue3實現(xiàn)模擬地圖站點名稱按需顯示的功能(車輛模擬地圖)
最近在做車輛模擬地圖,在實現(xiàn)控制站點名稱按需顯示,下面通過本文給大家分享vue3實現(xiàn)模擬地圖站點名稱按需顯示的功能,感興趣的朋友跟隨小編一起看看吧2024-06-06
Vue+Bootstrap收藏（點贊）功能邏輯與具體實現(xiàn)
這篇文章主要為大家詳細介紹了Vue+Bootstrap收藏（點贊）功能邏輯與具體實現(xiàn)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
使用vue實現(xiàn)多規(guī)格選擇實例（SKU）
這篇文章主要介紹了使用vue實現(xiàn)多規(guī)格選擇實例（SKU），文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
這篇文章主要介紹了如何在vue3中同時使用tsx與setup語法糖，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-09-09
這篇文章主要介紹了Vue前端打包的詳細流程,下面文章圍繞Vue前端打包的相關(guān)資料展開詳細內(nèi)容,需要的小伙伴可以參考一下，希望對大家有所幫助2021-11-11