vue 全選與反選的實(shí)現(xiàn)方法(無(wú)Bug 新手看過(guò)來(lái))

更新時(shí)間：2018年02月09日 11:25:59 作者：TCorners

下面小編就為大家分享一篇vue 全選與反選的實(shí)現(xiàn)方法(無(wú)Bug 新手看過(guò)來(lái))，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

我就廢話(huà)不多說(shuō)，直接上代碼吧！

<!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 { //實(shí)現(xiàn)全選
    this.selectArr = [];
    this.proData.forEach((item, i) =>{
     this.selectArr.push(i);
    });
   }
  }
 }
})
</script>
</html>

如果有bug，請(qǐng)告知！

以上這篇vue 全選與反選的實(shí)現(xiàn)方法(無(wú)Bug 新手看過(guò)來(lái))就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

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