3.
Mustache 不能在 HTML 属性中使用,应使用 :
<div v-bind:id="dynamicId"></div> |
这对布尔值的属性也有效 —— 如果条件被求值为 false 的话该属性会被移除:
<button v-bind:disabled="someDynamicCondition">Button</button> |
运行结果:
选中修改颜色,界面显示如下
4. 使用 JavaScript 表达式
迄今为止,在我们的模板中,我们一直都只绑定简单的属性键值。但实际上,对于所有的数据绑定, 都提供了完全的 JavaScript 表达式支持。
{ { number + 1 }}
{ { ok ? 'YES' : 'NO' }}
{ { message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div> |
这些表达式会在所属 Vue 实例的数据作用域下作为 被解析。有个限制就是,每个绑定都只能包含单个表达式,所以下面的例子都不会生效。
<!-- 这是语句,不是表达式 --> { { var a = 1 }}<!-- 流控制也不会生效,请使用三元表达式 --> { { if (ok) { return message } }} |
运行结果如下