vue實(shí)現(xiàn)div單選多選功能
更新時(shí)間：2020年07月16日 11:08:13 作者：sch695241721
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)div單選多選功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
vue實(shí)現(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ū)動(dòng)原則改變當(dāng)前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ū)動(dòng)原則，單純的操作dom元素，跟vue沒啥關(guān)系。
關(guān)于vue.js組件的教程，請(qǐng)大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue echarts封裝的實(shí)現(xiàn)，Echarts，它是一個(gè)與框架無關(guān)的JS圖表庫，但是它基于JS，這樣很多框架都能使用它2023-01-01
這篇文章主要介紹了Vue 如何追蹤數(shù)據(jù)變化，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-04-04
vue調(diào)用攝像頭進(jìn)行拍照并能保存到本地的方法
本文主要介紹了vue調(diào)用攝像頭進(jìn)行拍照并能保存到本地的方法，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了Vue2.0 ES6語法降級(jí)ES5的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要介紹了vue中如何安裝使用jquery的教程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
vuex實(shí)現(xiàn)像調(diào)用模板方法一樣調(diào)用Mutations方法
今天小編就為大家分享一篇vuex實(shí)現(xiàn)像調(diào)用模板方法一樣調(diào)用Mutations方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue中注冊(cè)組件的兩種方式詳解(全局注冊(cè)&& 局部注冊(cè))
vue 是一個(gè)完全支持組件化開發(fā)的框架， 組件之間可以進(jìn)行相互的引用，這篇文章主要介紹了vue中注冊(cè)組件的兩種方式詳解(全局注冊(cè)&& 局部注冊(cè)),需要的朋友可以參考下2023-06-06
組件是vue技術(shù)中非常重要的部分,組件使得與ui相關(guān)的輪子可以方便的制造和共享,進(jìn)而使得vue使用者的開發(fā)效率大幅提升,這篇文章主要給大家介紹了關(guān)于uni-app自定義組件的相關(guān)資料,需要的朋友可以參考下2024-02-02
vue給數(shù)組中對(duì)象排序 sort函數(shù)的用法
這篇文章主要介紹了vue給數(shù)組中對(duì)象排序 sort函數(shù)的用法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue+springboot實(shí)現(xiàn)登錄驗(yàn)證碼
這篇文章主要為大家詳細(xì)介紹了vue+springboot實(shí)現(xiàn)登錄驗(yàn)證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05