Vue内置指令之v-bind绑定class的介绍与举例
v-bind主要用于解决HTML元素属性值的绑定问题，用于响应更新HTML元素的属性，将一个或多个属性或一个组件的prop动态绑定到表达式。
v-bind绑定class，绑定方式：对象语法，含义class后面跟的是一个对象
用法：
1.直接通过{}绑定一个类
<h2 :class = "{'active':isActive}">Hello World</h2>
2.通过判断传入多个值
<h2 :class="{'active':isActive,'line':isLine}"></h2>
3.和普通的类同时存在，并不冲突(如果isActive和isLine都为true，那么会有title/active/line共存)
<h2 :class = "title" :class="{'active':isActive,'line':isLine}"></h2>
4.如果过于复杂，可以放在一个methods或者computer中（classes是一个计算属性）
<h2 class="title" :class="classes">Hello World</h2><!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.active {
color: red;
}
</style>
</head>
<body>
<div id = "app">
<h2 v-bind:class="{active: isActive, line: isLine}">{{message}}</h2>
<!--<h2 v-bind:class="getClasses()">{{message}}</h2>将过于复杂的class内容放到方法中-->
<button v-on:click="btnClick">按钮</button> <!--点击按钮字体颜色改变-->
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message:'你好',
isActive:true,
isLine:true
},
methods:{
btnClick: function () {
this.isActive = !this.isActive
}
/* getClasses:function () {//上面注释所用的代码
return {active: this.isActive, line: this.isLine}
}*/
}
})
</script>
</body>
</html>效果图：
