Vue 綁定style和class樣式的寫(xiě)法
更新時(shí)間：2023年10月17日 09:41:46 作者：小吳吳吳呀
class 與 style 綁定就是專門(mén)用來(lái)實(shí)現(xiàn)動(dòng)態(tài)樣式效果的技術(shù),如果需要?jiǎng)討B(tài)綁定 class 或 style 樣式,可以使用 v-bind 綁定,本文給大家講解Vue 綁定style和class樣式,感興趣的朋友一起看看吧
在應(yīng)用界面中，某些元素的樣式是動(dòng)態(tài)的。class 與 style 綁定就是專門(mén)用來(lái)實(shí)現(xiàn)動(dòng)態(tài)樣式效果的技術(shù)。
如果需要?jiǎng)討B(tài)綁定 class 或 style 樣式，可以使用 v-bind 綁定。
綁定 class 樣式【字符串寫(xiě)法】
適用于：類名不確定，需要?jiǎng)討B(tài)指定。
.box{
width: 100px;
height: 100px;
}
.aqua{
background-color: aqua;
}
.red{
background-color: red;
}
<div id="APP"> <div class="box" :class="back" @click="toggleBack">點(diǎn)擊變成紅色</div> </div>
注：第二個(gè) class 使用的是 v-bind 簡(jiǎn)寫(xiě)的方式， :class=" " 。
const vm = new Vue({
el: "#APP",
data(){
return {
back:"aqua"
}
},
methods:{
toggleBack(){
this.back = "red";
}
}
});
點(diǎn)擊前：
點(diǎn)擊后：
綁定 class 樣式【數(shù)組寫(xiě)法】：
適用于：要綁定多個(gè)樣式，個(gè)數(shù)不確定，名字也不確定。
.box{
width: 100px;
height: 100px;
}
.aqua{
background-color: aqua;
}
.border{
border: 20px solid red;
}
.radius{
border-radius: 25px;
}<div id="APP"> <div class="box" :class="classArr">多個(gè)class樣式</div> </div>
const vm = new Vue({
el: "#APP",
data(){
return {
classArr:["aqua","border","radius"]
}
}
});
如果要綁定多個(gè)樣式，個(gè)數(shù)確定，但是名字不確定，也可以使用以下寫(xiě)法：
<div id="APP"> <div class="box" :class="[a,b,c]">多個(gè)class樣式</div> </div>
const vm = new Vue({
el: "#APP",
data(){
return {
a: "aqua",
b: "border",
c: "radius"
}
}
});
注：效果與上邊的示例相同，a、b、c 都是變量，控制是否使用某個(gè) class 樣式。
到此這篇關(guān)于Vue 綁定style和class樣式的方式的文章就介紹到這了,更多相關(guān)Vue 綁定style和class內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
詳解vue中使用transition和animation的實(shí)例代碼
這篇文章主要介紹了詳解vue中使用transition和animation的實(shí)例代碼,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-12-12
這篇文章給大家講述了vue中關(guān)閉eslint的方法內(nèi)容，有需要的讀者們可以參考學(xué)習(xí)下。2018-08-08
這篇文章主要為大家介紹了Vue.js組件，組件是Vue.js最強(qiáng)大的功能之一，感興趣的小伙伴們可以參考一下2016-09-09
vue項(xiàng)目打包優(yōu)化方式(讓打包的js文件變小)
這篇文章主要介紹了vue項(xiàng)目打包優(yōu)化方式(讓打包的js文件變小)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue.js異步上傳文件前后端實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了vue.js異步上傳文件前后端的實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要介紹了VUE 打包后相對(duì)路徑的引用問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
最近學(xué)習(xí)了hooks,特地寫(xiě)一篇文章加深一下印象,下面這篇文章主要給大家介紹了關(guān)于vue3?hook自動(dòng)導(dǎo)入原理及使用的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
簡(jiǎn)單說(shuō)說(shuō)如何使用vue-router插件的方法
這篇文章主要介紹了如何使用vue-router插件的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
Vue項(xiàng)目中npm?install卡住問(wèn)題解決的詳細(xì)指南
這篇文章主要介紹了Vue項(xiàng)目中npm?install卡住問(wèn)題解決的相關(guān)資料,文中包括更換npm鏡像源、清除npm緩存、刪除.npmrc文件和升級(jí)Node.js版本,需要的朋友可以參考下2024-12-12
這篇文章主要介紹了詳解vue3.0 diff算法的使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07