看一个例子：
<html> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style> .active { border: 1px solid red; } </style> </head> <body> <div id="app"> <h2 v-bind:title="pTitle">测试内容</h2> <h2 :title="pTitle + ‘!!!‘">测试内容</h2> <h2 v-bind:class="isActive?‘active‘:‘‘" @click="toggleActive">这是内容</h2> <h2 v-bind:class="{active:isActive}">这是内容</h2> </div> <script> var app = new Vue({ el: ‘#app‘, data: { pTitle: ‘这是标题‘, isActive: false, }, methods: { toggleActive: function () { this.isActive = !this.isActive; } }, }) </script> </body> </html>
结果：
右键检查：
可以看出，v-bind就是给标签绑定属性。我们可以利用这一个特性，实现给标签加上事件之后改变属性。一般语法为：v-bind:属性名=“属性值”，可以简写为:属性名=“属性值”。
比如上面的：
<h2 v-bind:class="isActive?‘active‘:‘‘" @click="toggleActive">这是内容</h2>
<h2 v-bind:class="{active:isActive}">这是内容</h2>
这里有两种方式，一种是利用三元运算符，一种是利用{属性名：对应vue的值}，第二种较为方便。这里就是根据布尔值点击之后给h2标签加上一个class="active"的属性，看下效果：
原文：https://www.cnblogs.com/xiximayou/p/12317569.html