如何绑定到属性在Vue JS？

Question

我得到了这个错误

属性内的内插已被删除。改用v-bind或冒号速记。例如，代替

在这条线上

<a href="/Library/@Model.Username/{{myVueData.Id}}">

它在角度1中工作。在Vue中您是如何做到这一点的？




Answer 1

解决插值错误（简单的解决方案，我是初级前端开发人员）：示例在循环中发布对象：

• 而不是

    <a href="{{post.buttonLinkExt}}">

• 这样试试

    <a v-bind:href="post.buttonLinkExt">

Answer 2

在v-bind（或快捷方式）中使用javascript代码：

:href="'/Library/@Model.Username' + myVueData.Id"

和

:id="'/Library/@Model.Username' + myVueData.Id"

更新答案

有些指令可以带一个“参数”，在指令名称后面用冒号表示。例如，v-bind指令用于被动更新超文本标记语言属性：

<a v-bind:href="url"></a>

这里的参数是href，它告诉v-bind指令将元素的href属性绑定到表达式url的值。您可能已经注意到，这与使用href=“{{url}}”进行属性插值的结果相同：这是正确的，事实上，属性插值在内部被转换为v-bind绑定。

Answer 3

在模板中：

<a :href="href">

然后把href放在data中：

new Vue({
  // ...
  data: {
    href: 'your link'
  }
})

或使用计算属性：

new Vue({
  // ...
  computed: {
    href () {
      return '/foo' + this.someValue + '/bar'
    }
  }
})