vue實現(xiàn)給當(dāng)前元素添加樣式,其他元素?zé)o樣式問題
更新時間:2023年05月20日 08:47:39 作者:woderlili
這篇文章主要介紹了vue實現(xiàn)給當(dāng)前元素添加樣式,其他元素?zé)o樣式問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
給當(dāng)前元素添加樣式,其他元素?zé)o樣式
今天做項目的時候遇到,給當(dāng)前元素綁定樣式,原來使用原生js寫點亮盒子的時候都是利用for循環(huán),循環(huán)元素列表,在利用this來綁定當(dāng)前元素,給當(dāng)前元素添加類名或類樣式,當(dāng)然在添加類樣式前,還要將所有添加過的類樣式移除掉,然而vue就沒有這么麻煩
咱們直接上代碼
<template> <div class="content"> <span v-for="(item, index) in datas" //遍歷我們的數(shù)組 class="btn" :class="{active:index==isShow}" //看vue官方文檔可以通過boolean值控制樣式的顯隱性 @click="changeColor(index)">{{item.city}}</span> //在點擊的時候我們將index的值傳到方法中 </div> </template> <script> export default { data() { return { datas: [ { city: "上海" }, { city: "北京" }, { city: "關(guān)東" }, { city: "安徽" } ], isShow: -1 }; }, methods: { changeColor(index) { console.log(index); this.isShow = index } } }; </script> <style scoped> .content { width: 300px; margin:100px auto; } .btn { display: inline-block; margin: 10px; border: 1px solid #666; border-radius: 10px; padding:4px 8px; color: #5e13b4; font-size: 14px; cursor: pointer; } .active { background-color: #5e13b4; color: #fff; } </style>
vue動態(tài)添加樣式
vue實現(xiàn)點擊切換改變樣式
html代碼:根據(jù)數(shù)據(jù)動態(tài)循環(huán)一個列表
<ul> <li class="box" v-for="(list,index) in dataList" :key="index" :class="{'bor':clicked==index}" @click="changeTab(index)">{{list}}</li> </ul>
js代碼:
export default { data(){ return{ dataList:["選項1","選項2","選項3","選項4","選項5","選項6"], clicked:0 //標(biāo)識,初始化默認(rèn)選中第一項 } }, methods:{ changeTab(index){ this.clicked = index; } } }
css樣式,點擊選中添加黑色邊框
.bor{ border:2px solid black; }
效果:
總結(jié)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
解決vue-element-admin中配置跨域出現(xiàn)的問題
這篇文章主要介紹了解決vue-element-admin中配置跨域出現(xiàn)的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07