vue 动态绑定属性名、事件名
从 2.6.0 开始,可以用方括号括起来的 JavaScript 表达式作为一个指令的参数:动态参数绑定属性名:<a v-bind:[attributeName]="url"> ... </a>attributeName 是一个 JavaScript 表达式进行动态求值,求得的值将会作为最终的参数来使用。Vue 实例有一个 data 属性 attributeName...
·
从 2.6.0 开始,可以用方括号括起来的 JavaScript 表达式作为一个指令的参数:
动态参数绑定属性名:
<a v-bind:[attributeName]="url"> ... </a>
attributeName 是一个 JavaScript 表达式进行动态求值,求得的值将会作为最终的参数来使用。Vue 实例有一个 data 属性 attributeName,其值为 “href”,那么这个绑定将等价于 v-bind:href。
使用动态参数为一个动态的事件名绑定处理函数:
<a v-on:[eventName]="doSomething"> ... </a>
当 eventName 的值为 “focus” 时,v-on:[eventName] 将等价于 v-on:focus。
对动态参数的值的约束
动态参数预期会求出一个字符串,异常情况下值为 null。这个特殊的 null 值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告。
对动态参数表达式的约束
动态参数表达式有一些语法约束,因为某些字符,如空格和引号,放在 HTML attribute 名里是无效的。例如:
<!-- 这会触发一个编译警告 -->
<a v-bind:['foo' + bar]="value"> ... </a>
变通的办法是使用没有空格或引号的表达式,或用计算属性替代这种复杂表达式。
还需要避免使用大写字符来命名键名,因为浏览器会把 attribute 名全部强制转为小写:
<!--
在 DOM 中使用模板时这段代码会被转换为 `v-bind:[someattr]`。
除非在实例中有一个名为“someattr”的 property,否则代码不会工作。
-->
<a v-bind:[someAttr]="value"> ... </a>
更多推荐
已为社区贡献9条内容
所有评论(0)