Question

我收到了这个错误

内部属性内插已被删除。使用v-bind或结肠速记代替。例如，而不是<div id="{{ val }}">，使用<div :id="val">。

在这一行

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

它适用于Angular 1.你是如何在Vue中完成的？

Answer 1

在你的模板中：

<a :href="href">

您将href放入data：

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

或使用计算属性：

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

Answer 2

在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绑定。

Answer 3

仅需补充...即可解决插值错误（简单的解决方案，我是Junior前端开发人员）：循环中的示例发布对象：

代替

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

尝试这种方式

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

Answer 4

您可以使用简写:或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>' 
            }
    });

Answer 5

在Google搜索$attrib时发现此主题。问题未指定使用什么值（可能之前未定义）对于ANY父属性或要对其进行过滤，请使用类似的内容：

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

此说明创建特定的，动态的且上下文相关的包装器：

v-bind="$attrs"指示接受所有已发送的参数。不需要在脚本中声明为param对象。
即使使用有效的html属性（例如class
示例将静态类与父类混合并加入。使用三元运算符（x = 1？x：y）选择合适的运算符。
奖金：通过“是”，您可以动态设置header或secion之类的标签，而不是div
$attrs可以绑定到组件中的任何标签，因此可以轻松地为一个标签动态属性实现简单的传输，就像您为<input />定义类一样，但是包装和操作已添加到组件中

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

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

5 个答案: