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

Posted 2023-02-23

【中文标题】如何绑定到 Vue JS 中的属性？

【英文标题】：How to bind to attribute in 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 中做到这一点？

【参考方案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">