如何绑定到 Vue JS 中的属性？答案

【问题标题】：How to bind to attribute in Vue JS?如何绑定到 Vue JS 中的属性？
【发布时间】：2017-08-21 02:09:28
【问题描述】：

我收到了这个错误

属性内的插值已被删除。使用 v-bind 或而是冒号的简写。例如，代替<div id="{{ val }}">，使用<div :id="val">。

在这条线上

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

它适用于 Angular 1。你如何在 Vue 中做到这一点？

【问题讨论】：

标签： vue.js

【解决方案1】：

在您的模板中：

<a :href="href">

然后你将href 放入data：

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

或者使用计算属性：

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

【讨论】：

谢谢 CodinCat，我相信计算属性就是答案。我只是希望 Vue 能想出更好的东西。对于所有 href 和图像 src 来说，这将是乏味的 :(
如果你有多个hrefs需要以相同的模式计算，使用方法
点赞getHref (id) { return '/foo/' + id }
也一样吗？
@doga 不，它根本不是有效的模板语法。见vuejs.org/v2/guide/syntax.html#Attributes

【解决方案2】：

您可以使用简写 : 或 v-bind

<div>
    <img v-bind:src="linkAddress">
</div>

new Vue({
        el: '#app',
        data: {
            linkAddress: 'http://i3.kym-cdn.com/photos/images/newsfeed/001/217/729/f9a.jpg'
        }
});

或者当您需要的不仅仅是绑定属性时，您还可以这样做：

    new Vue({
            el: '#app',
            data: {
                finishedLink: '<a href="http://google.com"> Google </a>' 
            }
    });

【讨论】：

【解决方案3】：

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

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

和

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

更新答案

有些指令可以带一个“参数”，在指令名称后用冒号表示。例如，v-bind 指令用于响应式更新 HTML 属性：

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

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

【讨论】：

【解决方案4】：

在 Google 中搜索 $attrib 时发现此主题。问题不指定使用什么值（可能之前没有定义）对于任何父属性或过滤它，使用类似的东西：

<template>
  <component
    is="div"
    v-bind="$attrs"
    class="bg-light-gray"
  >
  EXAMPLE
  </component>
</template>

这指示创建特定的、动态的和上下文感知的包装器：

v-bind="$attrs" 指示获取所有发送的参数。不需要在脚本中声明为参数对象。
即使使用像class这样的有效html属性也能工作
上面的示例将静态类与父类混合并加入它。使用三元运算符 (x=1?x:y) 选择合适的运算符。
奖励：通过“is”，您可以动态设置标签，如header 或secion 而不是div
$attrs 可以绑定到组件中的任何标签，因此这很容易实现一个标签动态属性的简单传输，例如为 <input /> 定义类，但在组件中添加了包装器和操作

带有描述的来源：https://youtu.be/7lpemgMhi0k?t=1307

【讨论】：

【解决方案5】：

只是补... 解决插值错误（简单的解决方法，我是初级前端开发者）：循环中的示例帖子对象：

而不是

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

试试这个方法

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

【讨论】：