Vue文档——指令中的动态参数

从 2.6.0 开始,可以用方括号括起来的 JavaScript 表达式作为一个指令的参数:

<!--注意,参数表达式的写法存在一些约束,如之后的“对动态参数表达式的约束”章节所述。-->

<av-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>

变通的办法是使用没有空格或引号的表达式,或用计算属性替代这种复杂表达式。

在 DOM 中使用模板时 (直接在一个 HTML 文件里撰写模板),还需要避免使用大写字符来命名键名,因为浏览器会把 attribute 名全部强制转为小写:

<!--

在 DOM 中使用模板时这段代码会被转换为 `v-bind:[someattr]`。

除非在实例中有一个名为“someattr”的 property,否则代码不会工作。

-->

<a v-bind:[someAttr]="value"> ... </a>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 指令用在我们的html中。 指令 (Directives) 是带有v-前缀的特殊特性。指令特性的值预期是单个 Ja...
    Rising_life阅读 453评论 0 3
  • Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。 6...
    大强博客阅读 429评论 1 0
  • 模板语法 内容vue文件的构成模版 template脚本 script样式 style文本:数据绑定最常见的形式是...
    Byhua阅读 185评论 0 2
  • Vue的基本认识 官网: 英文官网: https://vuejs.org/中文官网: https://cn.vue...
    leofight阅读 552评论 0 1
  • 【0424今日话题】 四月目标完成得怎么样了? 大致完成一般般,不过其中有好有坏。 好处:每天利用早起一个小时坚持...
    单双眼星人阅读 143评论 0 1