1. v-bind动态绑定class

1.1. v-bind动态绑定class(对象语法)

有时候我们期望对Dom元素的节点的class进行动态绑定，选择此Dom是否有指定class属性。例如，给h2标签加上class="active"，当Dom元素有此class时候，变红<style>.active{color:red;}</style>，在写一个按钮绑定事件，点击变黑色，再次点击变红色。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>v-bind动态绑定class(对象语法)</title><style>.active{color:red;}</style>
</head>
<body><div id="app"><!-- <h2 class="active">{{message}}</h2><h2 :class="active">{{message}}</h2> --><!-- 动态绑定class对象用法  --><!-- <h2 :class="{key1:value1,key2:value2}">{{message}}</h2><h2 :class="{类名1:true,类名2:boolean}">{{message}}</h2> --><h2 class="title" :class="{active:isActive}">{{message}}</h2><h2 class="title" :class="getClasses()">{{message}}</h2><button @click="change">点击变色</button></div><script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script><script>const app = new Vue({el:"#app",data:{message:"你好啊",active:"active",isActive:true},methods: {change(){this.isActive = !this.isActive},getClasses(){return {active:this.isActive}}},})</script>
</body>
</html>

定义两个变量active和isActive，在Dom元素中使用:class={active:isActive}，此时绑定的class='active'，isActive为true，active显示，定义方法change()绑定在按钮上，点击按钮this.isActive = !this.isActive，控制Dom元素是否有class='active'的属性。

1.2. v-bind动态绑定class(数组用法)

class属性中可以放数组，会依次解析成对应的class。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>v-bind动态绑定class(数组用法)</title><style></style>
</head>
<body><div id="app"><!-- 加上单引号当成字符串 --><h2 class="title" :class="['active','line']">{{message}}</h2><!-- 不加会被当成变量 --><h2 class="title" :class="[active,line]">{{message}}</h2><h2 class="title" :class="getClasses()">{{message}}</h2></div><script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script><script>const app = new Vue({el:"#app",data:{message:"你好啊",active:"aaaa",line:'bbbb'},methods: {getClasses(){return [this.active,this.line]}},})</script>
</body>
</html>

加上单引号的表示字符串
不加的会当成变量

3 可以直接使用方法返回数组对象

2. v-for和v-bind结合

使用v-for和v-bind实现一个小demo，将电影列表展示，并点击某一个电影列表时候，将此电影列表变成红色。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>作业(v-for和v-bind的结合)</title><style>.active{color:red;}</style>
</head>
<body><div id="app"><ul><li v-for="(item, index) in movies" :key="index" :class="{active:index===currentIndex}" @click="changeColor(index)" >{{index+"---"+item}}</li></ul></div><script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script><script>const app = new Vue({el:"#app",data:{currentIndex:0,movies:["海王","海贼王","火影忍者","复仇者联盟"]},methods: {changeColor(index){this.currentIndex = index}},})</script>
</body>
</html>

3. v-bind动态绑定style

3.1 v-bind动态绑定style(对象语法)

<!-- <h2 :style="{key(属性名):value(属性值)}">{{message}}</h2> -->
<!-- 加单引号，当成字符串解析 -->
<h2 :style="{fontSize:'50px'}">{{message}}</h2>
<!-- 不加单引号，变量解析 -->
<h2 :style="{fontSize:fontSize}">{{message}}</h2>
<h2 :style="getStyle()">{{message}}</h2>

3.2 v-bind动态绑定style(数组语法)

<div id="app"><h2 :style="[baseStyle]">{{message}}</h2><h2 :style="getStyle()">{{message}}</h2></div><script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script><script>const app = new Vue({el:"#app",data:{message:"你好啊",baseStyle:{backgroundColor:'red'}},methods: {getStyle(){return [this.baseStyle]}},})</script>

类似绑定class，绑定style也是一样的。