<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> </head> <style> .a{ width: 100px; height: 100px; } .b{ background-color: red; } </style> <body> <!-- 上面定义了两个css样式，第一个定义了宽高，在容器里面固定使用了a样式，b样式则通过点击事件，绑定在了mood上，当点击事件执行时，修改mood，就会动态将b样式添加进去 这种方式只适用于样式的类名不确定，需要动态指定，或者动态增加样式的情况，称之为字符串写法 另外还可以绑定数组的写法，先把所有的类（css）定义好，然后扔进data中定义好的一个数组中，通过代码维护数组中的元素即可动态添加、减少样式 数组写法适用于要绑定的样式、个数、名称都不确定 第三种写法就是对象写法，通过定义一个对象，对象里面的属性对应一个类（css），属性的值是布尔类型，如果为true则表示使用这个样式，反之不使用 --> <div id = "app"> <button class="a" :class="mood" @click="mood = 'b'">aaa</button> <button :class="moodObj" >aaa</button> </div> <script> var vm = new Vue({ el: "#app", data :{ mood: ['a','b'],//数组也可以，操作数据即可增加、减少样式 moodObj: { a: true, b: false }//对象写法,通过改变a、b的布尔值决定该样式是否使用 } }) </script> </body> </html>