|
一、vue屬性綁定 在vue中，是通過v-bind 屬性綁定來實現(xiàn)給元素綁定style樣式。 其中有兩種方式，一種是通過綁定class類綁定樣式，另一種是通過內(nèi)聯(lián)樣式來實現(xiàn)樣式的綁定。 二、綁定class樣式 1. 數(shù)組 <h1 :class="['red', 'thin']">這是一個邪惡的H1</h1> 2. 數(shù)組中使用三元表達式 <h1 :class="['red', 'thin', isactive?'active':'']">這是一個邪惡的H1</h1> <style>
.red {
color: red;
}
.thin {
font-weight: 200;
}
.italic { /*字體傾斜*/
font-style: italic;
}
.active { /*字符間距*/
letter-spacing: 0.5em;
}
</style>
<body>
<div id='app'>
<!-- v-bind：等同于： -->
<!-- 第一種使用方式，直接傳遞一個數(shù)組，注意： 這里的 class 需要使用 v-bind 做數(shù)據(jù)綁定 -->
<h3 v-bind:class=['red','thin']>今天永遠比昨天更好</h3>
<!-- 在數(shù)組中使用三元表達式 -->
<h3 v-bind:class=['red','thin',flag?'active':'']>今天永遠比昨天更好</h3>
<!-- 在數(shù)組中使用 對象(即鍵值對的方式)來代替三元表達式，提高代碼的可讀性 -->
<h3 v-bind:class=['red','thin',{'active':flag}]>今天永遠比昨天更好</h3>
<!-- 在為 class 使用 v-bind 綁定 對象的時候，對象的屬性是類名，由于 對象的屬性可帶引號，也可不帶引號，所以 這里我沒寫引號； 屬性的值 是一個標識符 -->
<h3 :class="classObj">今天永遠比昨天更好</h1>
</div>
</body>
<script src="vue-2.4.0.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
flag:true,
classObj:{
red: true, thin: true, italic: false, active: false
}
}
})
</script>
</html>
三、綁定內(nèi)聯(lián)樣式 1. 直接在元素上通過 `:style` 的形式，書寫樣式對象
<h1 :style="{color: 'red', 'font-size': '40px'}">這是一個善良的H1</h1>
2. 將樣式對象，定義到 `data` 中，并直接引用到 `:style` 中
在data上定義樣式：
data: {
h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }
}
在元素中，通過屬性綁定的形式，將樣式對象應用到元素中：
<h1 :style="h1StyleObj">這是一個善良的H1</h1>
3. 在 `:style` 中通過數(shù)組，引用多個 `data` 上的樣式對象
在data上定義樣式：
data: {
h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' },
h1StyleObj2: { fontStyle: 'italic' }
}
在元素中，通過屬性綁定的形式，將樣式對象應用到元素中：
```
<h1 :style="[h1StyleObj, h1StyleObj2]">這是一個善良的H1</h1>
? 來源：https://www./content-4-658201.html |
|
|
