Vue常用的全選/反選的示例代碼
更新時間：2020年02月19日 09:27:44 作者：趙不悔
這篇文章主要介紹了Vue常用的全選/反選的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
在Vue中執(zhí)行CheckBox的全選反選有很多方法
我覺得最易懂，速度最快的方法就是這個！
首先就是自己創(chuàng)建一個input，正在mx.txt的前方添加一個input：CheckBox。在v-model加上你每次創(chuàng)建出來的mx.check
最重點(diǎn)就在于forEach遍歷，出來的都是當(dāng)前的。
有些人不注意的一點(diǎn)，為什么data里面沒有check:[]這樣的出現(xiàn)。
data里的是實(shí)時監(jiān)控，你點(diǎn)一次自動將所有的check都變成了true。
<template>
<div class="check">
<button @click="checkAll">全選</button>
<br>
<input type="text" v-model="txt" @keyup.enter="ck" />
<ul>
<li v-for="(mx, index) in list" :key="index">
<input type="checkbox" v-model="mx.check" /> {{mx.txt}}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
txt: "",
list: []
}
},
methods: {
ck() {
this.list.push({
txt: this.txt,
check: false
})
this.txt = ""
},
checkAll() {
this.list.forEach((mx) => {
mx.check = !mx.check
})
}
}
}
</script>
<style lang="less">
.check {
cursor: pointer;
button {
cursor: pointer;
border: 0;
padding: 10px 30px;
background: #000;
color: #fff;
border-radius: 100px;
margin-bottom: 10px;
outline: none;
}
input {
padding: 15px;
width: 300px;
border: 0;
box-shadow: 0 0 15px #ccc;
}
ul {
width: 300px;
padding: 0;
cursor: pointer;
box-shadow: 0 0 15px #ccc;
min-height: 300px;
padding: 15px;
list-style: none;
li {
cursor: pointer;
margin-bottom: 12px;
>input {
padding: 0;
width: auto;
}
}
}
}
</style>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue.js中ref及$refs的使用方法解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-10-10
下面小編就為大家?guī)硪黄猇ue渲染函數(shù)詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了VueRouter導(dǎo)航守衛(wèi)的詳細(xì)用法以及分類介紹，有興趣的朋友學(xué)習(xí)參考下吧。2017-12-12
vue 組件數(shù)據(jù)加載解析順序的詳細(xì)代碼
Vue.js的解析順序可以概括為:模板編譯、組件創(chuàng)建、數(shù)據(jù)渲染、事件處理和生命周期鉤子函數(shù)執(zhí)行,接下來通過本文給大家介紹vue 組件數(shù)據(jù)加載解析順序的完整代碼,感興趣的朋友跟隨小編一起看看吧2024-03-03
這篇文章主要給大家介紹了關(guān)于VUE3函數(shù)的聲明和使用的相關(guān)資料, Vue3是一種流行的JavaScript框架,它允許開發(fā)人員構(gòu)建現(xiàn)代化的Web應(yīng)用程序,需要的朋友可以參考下2023-07-07
在實(shí)際項(xiàng)目開發(fā)中,幾乎每個組件中都會用到?axios?發(fā)起數(shù)據(jù)請求,下面這篇文章主要給大家總結(jié)介紹了關(guān)于Vue3全局配置axios的兩種方式,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01
這篇文章主要介紹了element的el-table中記錄滾動條位置的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
這篇文章主要介紹了前端漸進(jìn)式框架VUE的相關(guān)資料，文中講解的非常細(xì)致，幫助大家開始學(xué)習(xí)VUE，感興趣的朋友可以了解下2020-07-07
Vue3項(xiàng)目中引入ElementUI并使用的示例詳解
ElementUI是一個強(qiáng)大的PC端UI組件框架，它不依賴于vue，但是卻是當(dāng)前和vue配合做項(xiàng)目開發(fā)的一個比較好的ui框架，本文主要介紹了如何在vue3中引入使用ElementUI，需要的可以參考一下2023-06-06
本文主要介紹了vue.js實(shí)現(xiàn)綁定class和style樣式的方法。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04