vuejs之v-bind
看一个例子:
<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"的属性,看下效果: