class 與 style 是 HTML 元素的屬性，用來設定元素的樣式，我們可以用 v-bind 來設定樣式屬性。
以下例子，把class樣式設定在style標籤中，vue實例中只存在一個布林值isActive ，用v-bind:class=”{ active: isActive }”的方式綁定樣式，根據布林值來決定是否渲染。
<style>.active {
width: 100px;
height: 100px;
background: green;}</style><p id="app">
<p v-bind:class="{ active: flag}"></p></p><script>new Vue({
el: '#app',
data: {
flag: true
}
})
</script>綁定多個class
v-bind:class="{ active: isActive, 'text-danger': hasError }">以物件形式綁定多個class
<p id="app">
<p v-bind:class="classObject"></p></p><script>new Vue({
el: '#app',
data: {
classObject: {
active: true,
'text-danger': true
}
}
})
</script>以數組的方式綁定樣式
<p id="app">
<p v-bind:class="[activeClass, errorClass]"></p></p><script>new Vue({
el: '#app',
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
})
</script><p id="app">
<p v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</p></p><script>new Vue({
el: '#app',
data: {
activeColor: 'green',
fontSize: 30
}
})<p id="app">
<p v-bind:style="styleObject">菜鸟教程</p></p><script>new Vue({
el: '#app',
data: {
styleObject: {
color: 'green',
fontSize: '30px'
}
}
})
</script>以上是vue.js樣式綁定問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！
