溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“Vue.js怎么綁定class屬性”，在日常操作中，相信很多人在Vue.js怎么綁定class屬性問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Vue.js怎么綁定class屬性”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
一、" "內是vue對象內存在的對象
:class = " 語句" ， 語句中傳入的是vue建立的變量，計算屬性，函數等的時候，就會把vue中所對應的對象的值替換成class的值。傳入的是字符串' '的話就直接作為class屬性值。
這種情況不能綁定一個class值，并且只能通過綁定的class的變量的值修改才能改變class屬性的值。
代碼實例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.active{
color:red;
}
</style>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<div :class="c1">{{c1}}</div>
</div>
<script>
const app = new Vue（{
el:"#app",
data:{
c1:"active"
},
}）;
</script>
</body>
</html>
二、" " 內為 [ ] 數組
當我們想綁定多個class屬性值時，就可以在" "內傳入 [ ] 數組。數組內的值是vue內的對象變量名。如果帶有' '則傳入的就是實際值，不會被替換。
代碼實例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.active{
color:red;
}
.font{
background-color:blue;
}
</style>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<div :class="[c1,c2,'c3']">{{c1}}</div>
</div>
<script>
const app = new Vue（{
el:"#app",
data:{
c1:"active",
c2:"font",
},
}）;
</script>
</body>
</html>
頁面效果： 顯然標簽屬性會是 class="active font c3";
三、 " "內為 { } json對象
當我們想綁定多個class屬性值，設置的每個class屬性值是已經給出的。可以設置綁定的屬性值時決定要還是不要，比如 class = "n1 n2", 我們通過vue可以將設置成class = "n1"，但不能通過vue直接設置成class="n3" ；
我們就要用到 { } 對象來表達。只有每一個設置的class屬性值對應的一個boolean類型的值來決定該標簽是否擁有該屬性值，但對應的boolean值是true才給class屬性賦值。
格式為：
該類型的格式為 :class = " { n1 : b1 , n2: b2 }" ；
注意：
// b1,b2是boolean類型
// n1,n2不在被vue對象替換，就是純文本 !無論加不加" ", 如上述 ，假設b1 = true, b2=true。則在頁面渲染時， 該標簽屬性 class = " n1 n2"
代碼演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.active{
color:red;
}
.font{
background-color:blue;
}
</style>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<div :class="{active:isTrue1,font:isTrue2}">{{c1}}</div>
</div>
<script>
const app = new Vue（{
el:"#app",
data:{
c1:"active",
c2:"font",
isTrue1:true,
isTrue2:false
},
}）;
</script>
</body>
</html>
頁面效果：果不其然， :class="{active:isTrue1,font:isTrue2}" 中active,font并沒有被vue替換，而是直接當成class屬性值 !
到此，關于“Vue.js怎么綁定class屬性”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
