vue實現(xiàn)div單選多選功能
更新時間：2020年07月16日 11:08:13 作者：sch695241721
這篇文章主要為大家詳細介紹了vue實現(xiàn)div單選多選功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
vue實現(xiàn)div單選多選功能，供大家參考，具體內(nèi)容如下
單選
單選：
多選：
單選功能
DOM層：
<div class="labeloption" :class="{checked:ageActive == 11}" @click="changeStatus(11)">0-16歲</div>
<div class="labeloption" :class="{checked:ageActive == 12}" @click="changeStatus(12)">17-25歲</div>
<div class="labeloption" :class="{checked:ageActive == 13}" @click="changeStatus(13)">26-35歲</div>
<div class="labeloption" :class="{checked:ageActive == 14}" @click="changeStatus(14)">36-45歲</div>
<div class="labeloption" :class="{checked:ageActive == 15}" @click="changeStatus(15)">46-55歲</div>
<div class="labeloption" :class="{checked:ageActive == 16}" @click="changeStatus(16)">55歲以上</div>
js層：
new Vue({
el: '#home',
data() {
return {
ageActive:11 //初始選中狀態(tài)的元素id
}
},
methods: {
changeStatus(number){
this.ageActive = number;
}
}
})
單選功能主要利用的是vue的數(shù)據(jù)驅(qū)動原則改變當前dom元素的狀態(tài)
多選功能
DOM層：
<div class="labeloption checked" @click="changeStatus($event,11)">0-16歲</div> <div class="labeloption" @click="changeStatus($event,12)">17-25歲</div> <div class="labeloption" @click="changeStatus($event,13)">26-35歲</div> <div class="labeloption" @click="changeStatus($event,14)">36-45歲</div> <div class="labeloption" @click="changeStatus($event,15)">46-55歲</div> <div class="labeloption" @click="changeStatus($event,16)">55歲以上</div>
js層：
new Vue({
el: '#home',
data() {
methods: {
changeStatus(e,number){
if (e.target.className.indexOf("checked") == -1) {
e.target.className = "labeloption checked"; //選中div樣式
} else {
e.target.className = "labeloption";//未選中div樣式
}
}
})
多選功能于單選功能不同，沒有用到vue的數(shù)據(jù)驅(qū)動原則，單純的操作dom元素，跟vue沒啥關(guān)系。
關(guān)于vue.js組件的教程，請大家點擊專題vue.js組件學(xué)習(xí)教程進行學(xué)習(xí)。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue this.$toast()用法 ，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要給大家詳細介紹一下Vue3中的基本語法，文中的示例代碼講解詳細，對我們學(xué)習(xí)Vue3有一定的幫助，感興趣的小伙伴可以了解一下2022-11-11
這篇文章主要介紹了vue devserver及其配置方法,本文結(jié)合示例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12
這篇文章主要給大家介紹了關(guān)于Vue3更高效的構(gòu)建工具Vite使用的相關(guān)資料,Vite是一種面向現(xiàn)代瀏覽器的一個更輕、更快的前端構(gòu)建工具,能夠顯著提升前端的開發(fā)體驗,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了vue?router?動態(tài)路由清除方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要介紹了vue中關(guān)于@media媒體查詢的使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue用Export2Excel導(dǎo)出excel,多級表頭數(shù)據(jù)方式
這篇文章主要介紹了Vue用Export2Excel導(dǎo)出excel,多級表頭數(shù)據(jù)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
commit 和dispatch的區(qū)別在于commit是提交mutatious的同步操作,dispatch是分發(fā)actions的異步操作,本文重點給大家講解vuex中commit和dispatch的區(qū)別,感興趣的朋友一起看看吧2024-06-06
vue項目中如何實現(xiàn)element-ui組件按需引入
這篇文章主要介紹了vue項目中如何實現(xiàn)element-ui組件按需引入，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
vue項目中使用eslint+prettier規(guī)范與檢查代碼的方法
這篇文章主要介紹了vue項目中使用eslint+prettier規(guī)范與檢查代碼的方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01