vue實現(xiàn)div單選多選功能

更新時間：2020年07月16日 11:08:13 作者：sch695241721

這篇文章主要為大家詳細介紹了vue實現(xiàn)div單選多選功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

vue實現(xiàn)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 //初始選中狀態(tài)的元素id
 }
 },
 methods: {
 changeStatus(number){
 this.ageActive = number;
 }
 }
 })

單選功能主要利用的是vue的數(shù)據(jù)驅動原則改變當前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ù)驅動原則，單純的操作dom元素，跟vue沒啥關系。

關于vue.js組件的教程，請大家點擊專題vue.js組件學習教程進行學習。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

Vue echarts封裝實現(xiàn)流程
這篇文章主要介紹了Vue echarts封裝的實現(xiàn)，Echarts，它是一個與框架無關的JS圖表庫，但是它基于JS，這樣很多框架都能使用它
2023-01-01
Vue 如何追蹤數(shù)據(jù)變化
這篇文章主要介紹了Vue 如何追蹤數(shù)據(jù)變化，幫助大家更好的理解和學習使用vue框架，感興趣的朋友可以了解下
2021-04-04
vue調用攝像頭進行拍照并能保存到本地的方法
本文主要介紹了vue調用攝像頭進行拍照并能保存到本地的方法，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-04-04
Vue2.0 ES6語法降級ES5的操作
這篇文章主要介紹了Vue2.0 ES6語法降級ES5的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-10-10
vue中如何安裝使用jquery
這篇文章主要介紹了vue中如何安裝使用jquery的教程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-04-04
vuex實現(xiàn)像調用模板方法一樣調用Mutations方法
今天小編就為大家分享一篇vuex實現(xiàn)像調用模板方法一樣調用Mutations方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
vue中注冊組件的兩種方式詳解(全局注冊&& 局部注冊)
vue 是一個完全支持組件化開發(fā)的框架，組件之間可以進行相互的引用，這篇文章主要介紹了vue中注冊組件的兩種方式詳解(全局注冊&& 局部注冊),需要的朋友可以參考下
2023-06-06
uni-app自定義組件詳細代碼示例
組件是vue技術中非常重要的部分,組件使得與ui相關的輪子可以方便的制造和共享,進而使得vue使用者的開發(fā)效率大幅提升,這篇文章主要給大家介紹了關于uni-app自定義組件的相關資料,需要的朋友可以參考下
2024-02-02
vue給數(shù)組中對象排序 sort函數(shù)的用法
這篇文章主要介紹了vue給數(shù)組中對象排序 sort函數(shù)的用法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-09-09
vue+springboot實現(xiàn)登錄驗證碼
這篇文章主要為大家詳細介紹了vue+springboot實現(xiàn)登錄驗證碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-05-05