小編這次要給大家分享的是如何用vue實現div單選多選功能，文章內容豐富，感興趣的小伙伴可以來了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。
vue實現div單選多選功能，供大家參考，具體內容如下
單選
單選：
多選：
單選功能
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 //初始選中狀態的元素id
}
},
methods: {
changeStatus(number){
this.ageActive = number;
}
}
})單選功能主要利用的是vue的數據驅動原則改變當前dom元素的狀態
多選功能
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的數據驅動原則，單純的操作dom元素，跟vue沒啥關系。
看完這篇關于如何用vue實現div單選多選功能的文章，如果覺得文章內容寫得不錯的話，可以把它分享出去給更多人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
