vue學習五(繫結class、v-bind:style(物件語法、陣列語法))
阿新 • • 發佈：2019-02-14
繫結 HTML Class
我們可以傳給 v-bind:class 一個物件，以動態地切換 class：
內聯樣式在模板裡
<div id="div1" :class="{active: isActive, 'text-danger': hasError}"></div> <script type="text/javascript"> var vm1 = new Vue({ el: "#div1", data: { isActive: true, hasError: true, } }) </script>
通過瀏覽器檢視，渲染的html結構是：
<div id="div1" class="active text-danger"></div>
內聯樣式不在模板裡
<div id="div2" :class="class_obj"></div> <script type="text/javascript"> var vm2 = new Vue({ el: "#div2", data: { class_obj: { isActive: true, hasError: true, } } }) </script>
渲染為如下的結構：
<div id="div2" class="isActive hasError"></div>
繫結返回物件的計算屬性
<div id="div3" v-bind:class="classObject"></div> <script type="text/javascript"> var vm3 = new Vue({ el: "#div3", data: { isActive: true, error: true }, computed: { classObject: function () { return { active: this.isActive && this.error, 'text-danger': this.error } } } }) </script>
渲染的html結構如下：
<div id="div3" class="active text-danger"></div>
陣列語法
我們可以把一個數組傳給 v-bind:class，以應用一個 class 列表：
class 列表
<div id="div4" v-bind:class="[activeClass, errorClass]"></div>
<script type="text/javascript">
new Vue({
el: "#div4",
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
})
</script>
渲染為
<div id="div4" class="active text-danger"></div>
class 列表使用三元表示式
如果你也想根據條件切換列表中的 class，可以用三元表示式：
<div id="div5" v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
<script type="text/javascript">
new Vue({
el: "#div5",
data: {
isActive: true,
activeClass: 'active',
errorClass: 'text-danger'
}
})
</script>
渲染為：
<div id="div5" class="active text-danger"></div>
class 列表使用物件語法
<div id="div6" v-bind:class="[{ active: isActive }, errorClass]"></div>
<script type="text/javascript">
new Vue({
el: "#div6",
data: {
isActive: true,
errorClass: 'text-danger'
}
})
</script>
渲染為：
<div id="div6" class="active text-danger"></div>
class 綜合練習
<style>
.red {
color: red;
}
.thin {
font-weight: 200;
}
.italic {
font-style: italic;
}
.active {
letter-spacing: 0.5em;
}
</style>
<body>
<div id="app">
<h1 class="red thin">這是一個很大很大的H1，大到你無法想象！！！</h1>
<!-- 第一種使用方式，直接傳遞一個數組，注意： 這裡的 class 需要使用 v-bind 做資料繫結 -->
<h1 :class="['thin', 'italic']">這是一個很大很大的H1，大到你無法想象！！！</h1>
<!-- 在陣列中使用三元表示式 -->
<h1 :class="['thin', 'italic', flag?'active':'']">這是一個很大很大的H1，大到你無法想象！！！</h1>
<!-- 在陣列中使用 物件來代替三元表示式，提高程式碼的可讀性 -->
<h1 :class="['thin', 'italic', {'active':flag} ]">這是一個很大很大的H1，大到你無法想象！！！</h1>
<!-- 在為 class 使用 v-bind 繫結 物件的時候，物件的屬性是類名，由於 物件的屬性可帶引號，也可不帶引號，所以 這裡我沒寫引號； 屬性的值 是一個識別符號 -->
<h1 :class="classObj">這是一個很大很大的H1，大到你無法想象！！！</h1>
</div>
<script>
// 建立 Vue 例項，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
flag: true,
classObj: { red: true, thin: true, italic: false, active: false }
},
methods: {}
});
</script>
</body>
用在元件上
1、例如，如果你聲明瞭這個元件：
Vue.component('my-component', {
template: '<p class="foo bar">Hi</p>'
})
然後在使用它的時候新增一些 class：
<my-component class="baz boo"></my-component>
HTML 將被渲染為:
<p class="foo bar baz boo">Hi</p>
2、對於帶資料繫結 class 也同樣適用：
<my-component v-bind:class="{ active: isActive }"></my-component>
當 isActive 為 truthy[1] 時，HTML 將被渲染成為：
<p class="foo bar active">Hi</p>
繫結內聯樣式v-bind:style
v-bind:style 的物件語法十分直觀——看著非常像 CSS，但其實是一個 JavaScript 物件
<div id="div1" v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">{{ msg }}</div>
<script type="text/javascript">
new Vue({
el: "#div1",
data: {
activeColor: 'red',
fontSize: 30,
msg: "hello vue"
}
})
</script>
直接繫結到一個樣式物件通常更好，這會讓模板更清晰：
<div id="div2" v-bind:style="styleObject">{{ msg }}</div>
<script type="text/javascript">
new Vue({
el: "#div2",
data: {
msg: "直接繫結到一個樣式物件通常更好",
styleObject: {
color: 'red',
fontSize: '23px'
}
}
})
</script>
物件語法常常結合返回物件的計算屬性使用
<div id="div3" v-bind:style="styleObject">{{ msg }}</div>
<script type="text/javascript">
new Vue({
el: "#div3",
data: {
msg: "結合返回物件的計算屬性使用",
color: 'red',
fontSize: '12px'
},
computed: {
styleObject: function () {
return {color: 'yellow', fontSize: '23px'}
}
}
})
</script>
我們可以把一個數組傳給 v-bind:class，以應用一個 class 列表
<div id="div4" v-bind:style="[baseStyles, overridingStyles]">{{ msg }}</div>
<script type="text/javascript">
new Vue({
el: "#div4",
data: {
msg: "我是陣列繫結方法",
baseStyles: {
color: 'green',
fontSize: '30px'
},
overridingStyles: {
'font-weight': 'bold'
}
}
})
</script>
瀏覽器渲染結果如下：
