- v-bind:class
<!DOCTYPE html> <html> <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></title> <link type="text/css" rel="styleSheet" href="../css/style.css" /> <script src="../js/vue.js"></script> </head> <body> <div id="example"> <p v-bind:class="{active:isActive}">我是蓝色文本</p> <p :class="{active:isActive}">我也是蓝色文本</p> <button @click="btnclick()">{{btn}}</button> </div> </body> <script> new Vue({ el: "#example", data: { isActive: true, btn : "毙掉蓝色" }, methods: { btnclick: function() { if(this.isActive == true) { this.isActive = false; this.btn = "毙掉黑色"; }else { this.isActive = true; this.btn = "毙掉蓝色"; } } } }); </script> </html>