Vue绑定class与绑定内联样式--v-bind
2020-02-03 本文已影响0人
wenmingxing
1. 绑定class--对象语法
为v-bind:class设置一个对象，可以动态切换class：
<!-- 绑定class-对象语法 -->
<body>
<div id="app">
<!-- 类active依赖于数据isActive，当其为true时，div拥有类名Active -->
<div :class="{'active': isActive}"></div>
<!-- 对象中也可以传入多个属性，动态切换class -->
<!-- <div class="static" :class="{'active':isActive, 'error':isError}"></div> -->
</div>
<script src = "https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
isActive: true,
isError: false,
},
})
</script>
</body>
当:class的表达式过长或逻辑复杂时，还可以绑定一个计算属性：
<!-- 绑定class-对象语法-绑定计算属性 -->
<body>
<div id="app">
<div :class="classes"></div>
</div>
<script src = "https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
isActive: true,
isError: null,
},
computed: {
classes: function() {
return {
active: this.isActive && !this.error,
'text-fail': this.error && this.error.type === '',
}
}
}
})
</script>
</body>
2. 绑定class--数组语法
当需要应用多个class时，可以使用数组语法，给:class绑定一个数组，应用一个class列表：
<!-- 绑定class-数组语法 -->
<body>
<div id="app">
<!-- 结果为拥有active与error两个类名 -->
<div :class="[activeCls, errorCls]"></div>
</div>
<script src = "https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
activeCls: 'active',
errorCls: 'error',
},
})
</script>
</body>
3. 绑定内联样式
使用:style可以给元素绑定内联样式，与:class类似，也有对象语法和数组语法。
参考
- 《Vue.js实战》
