v-bind用于绑定 html 属性,通常会将v-bind缩写(如"v-bind:class"可缩写成":class");
v-bind除了可以绑定字符串类型变量以外,还可以支持单一的JavaScript表达式,如:
- 执行运算:
<div id="app"> <p v-bind:title="t1 + ' ' + t2">html属性不能使用双大括号形式绑定,只能使用v-bind指令</p> </div> ...... var vm = new Vue({ el: '#app', data: { t1: 'title1', t2: 'title2' } });
-
执行函数:
<div id="app"> <p v-bind:title="getTitle()">html属性不能使用双大括号形式绑定,只能使用v-bind指令</p> </div> ...... var vm = new Vue({ el: '#app', data: { getTitle: function () { return 'title content'; } } });
使用v-bind有三种绑定方法:
- 对象型:'{red:isred}'
- 三目型:'isred?"red":"blue"'
- 数组型:'[{red:"isred"},{blue:"isblue"}]'