vue中如何給多個按鈕動態(tài)添加類名
更新時間：2023年11月14日 14:10:30 作者：啵啵怪_
這篇文章主要介紹了vue中如何給多個按鈕動態(tài)添加類名問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue給多個按鈕動態(tài)添加類名
點擊按鈕，切換高亮背景
<button @click="btnClick(1)" :class="{ active: btnNum === 1 }">日</button>
<button @click="btnClick(2)" :class="{ active: btnNum === 2 }">日累計</button>
<button @click="btnClick(3)" :class="{ active: btnNum === 3 }">月</button>
<script>
export default {
data() {
return {
btnNum: 1,//默認(rèn)‘日'高亮背景
}
},
methods:{
btnClick(index) {
this.btnNum = index;
}
}
}
</script>
<style>
.active {
background: #0c80dd !important;
}
</style>
vue動態(tài)添加兩個類名
const isActive = ref(true)
const hasError = ref(false)
<div
class="static"
:class="{ active: isActive, 'text-danger': hasError }"
></div>
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue基礎(chǔ)之data存儲數(shù)據(jù)及v-for循環(huán)用法示例
這篇文章主要介紹了vue基礎(chǔ)之data存儲數(shù)據(jù)及v-for循環(huán)用法,結(jié)合實例形式分析了vue.js使用data存儲數(shù)據(jù)、讀取數(shù)據(jù)及v-for遍歷數(shù)據(jù)相關(guān)操作技巧,需要的朋友可以參考下2019-03-03
這篇文章主要介紹了vue如何實現(xiàn)動態(tài)加載腳本,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-02-02
本文主要介紹了M1 pro芯片啟動Vue項目的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
這篇文章主要介紹了vue3+vite+antd如何實現(xiàn)自定義主題問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
vue項目實例中用query傳參如何實現(xiàn)跳轉(zhuǎn)效果
這篇文章主要介紹了vue項目實例中用query傳參如何實現(xiàn)跳轉(zhuǎn)效果，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue.js 中 ref 和 reactive 的區(qū)別及用法解析
在Vue.js中,ref主要用于創(chuàng)建響應(yīng)式的引用,通過.value屬性來訪問和修改值,特別適用于需要頻繁更改整個值的場景,而reactive則用于創(chuàng)建深度響應(yīng)的對象或數(shù)組,本文給大家介紹Vue.js 中 ref 和 reactive 的區(qū)別及用法,感興趣的朋友跟隨小編一起看看吧2024-09-09
Vue3利用組合式函數(shù)和Shared Worker實現(xiàn)后臺分片上傳
這篇文章主要為大家詳細(xì)介紹了Vue3如何利用組合式函數(shù)和Shared Worker實現(xiàn)后臺分片上傳(帶哈希計算),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-10-10
vue自定v-model實現(xiàn)表單數(shù)據(jù)雙向綁定問題
vue.js的一大功能便是實現(xiàn)數(shù)據(jù)的雙向綁定。這篇文章主要介紹了vue自定v-model實現(xiàn) 表單數(shù)據(jù)雙向綁定的相關(guān)知識，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-09-09
這篇文章主要給大家介紹了vue 2.0路由之路由嵌套的相關(guān)資料，文中給出了詳細(xì)的示例代碼供大家參考學(xué)習(xí)，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。2017-05-05
為了方便大家寫代碼，Vue給大家提供了很多方便的修飾符，比如我們經(jīng)常用到的取消冒泡，阻止默認(rèn)事件等等，這篇文章將給大家分享Vue?中的常用的修飾符2022-10-10