:class="{ 'active': isActive }"
:style="{color: green}"
一。class 属性绑定
<div v-bind:class="{ 'active': isActive }"></div>
v-bind:class="{ 'active' : isActive, 'text-danger' : hasError }">
<div v-bind:class="[activeClass, errorClass]"></div>
<div id="app">
<div v-bind:class="classObject"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
isActive: true,
error: {
value: true,
type: 'fatal'
}
},
computed: {
classObject: function () {
return {
base: true,
active: this.isActive && !this.error.value,
'text-danger': this.error.value && this.error.type === 'fatal',
}
}
}
})
</script>
</body>
</html>
:class = 的右边 可以以数组的方式,对象的方式,和计算属性 函数 ,对象,数组可以写在data里。
二。Vue.js style(内联样式)
:style="{color: green}"
<div v-bind:style="[baseStyles, overridingStyles]">菜鸟教程</div>
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div>
:style=的右边 可以以数组的方式,对象的方式,和计算属性 函数 ,对象和数组不可以写在data里。