Vue.js怎么綁定class屬性

這篇文章主要介紹“Vue.js怎么綁定class屬性”，在日常操作中，相信很多人在Vue.js怎么綁定class屬性問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Vue.js怎么綁定class屬性”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

獲嘉ssl適用于網(wǎng)站、小程序/APP、API接口等需要進行數(shù)據(jù)傳輸應用場景，ssl證書未來市場廣闊！成為成都創(chuàng)新互聯(lián)公司的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：028-86922220（備注：SSL證書合作）期待與您的合作！

一、"  "內是vue對象內存在的對象

        :class = " 語句" ， 語句中傳入的是vue建立的變量，計算屬性，函數(shù)等的時候，就會把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>

二、"  " 內為  [  ] 數(shù)組

        當我們想綁定多個class屬性值時，就可以在"  "內傳入 [  ]  數(shù)組。數(shù)組內的值是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屬性值是已經(jīng)給出的?？梢栽O置綁定的屬性值時決定要還是不要，比如 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屬性”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關知識，請繼續(xù)關注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>

網(wǎng)站欄目：Vue.js怎么綁定class屬性
網(wǎng)站URL：http://bm7419.com/article2/pcsjoc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、網(wǎng)站維護、網(wǎng)站設計、全網(wǎng)營銷推廣、網(wǎng)站策劃、網(wǎng)站設計公司

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

成都seo排名網(wǎng)站優(yōu)化