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