通过使用v-bind绑定class和style动态的改变DOM元素的样式。v-bind的基本用法以及它的语法糖,它主要用法是动态更新HTML元素上的属性。
绑定class的几种方式
1.对象语法
给v-bind:class设置一个对象,可以动态地切换class。例如:
<div id="app">
<div :class="{'active': isActive}"></div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
isActive: true
}
})
</script>
对象中也可以传入多个参数,来动态地切换class,:class可以和普通class同存。
<div id="app">
<div :class="{'active': isActive, 'error': isError}"></div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
isActive: true,
isError: false
}
})
</script>
当:class的表达式过长或逻辑复杂时,还可以绑定一个计算属性。