使用 Vue 为锚标记中的 href 赋值

Question

听起来很愚蠢，但我找不到传递在 href 中定义的变量数据的方法：

ComponentFile.vue 我尝试了所有这些：

 <a href=" url ">{{ url }}</a>
<a href=" {{ url }}">{{ url }}</a>
<a href=" {{ url }}">{{ url }}</a>
<a v-bind:href="url">{{ url }}</a>
<a @click=" url " v-bind:href="url"> {{ url }}</a>

...
export default {
        data() {
                   url: 'http://anywhere.com'
  }
}

正确的方法是什么？

谢谢！

原文由 commandantp 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您已将 data() 定义为一个函数，但它没有返回任何内容。它应该返回一个带有数据的对象，如下所示：

 export default {
    data() {
        return {
            url: 'http://anywhere.com'
        }
    }
}

然后这些中的任何一个都可以工作：

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

编辑 VUE 2：

不再建议在属性中插入变量。改变：

 <a href="{{url}}">{{ url }}</a>

到其中之一：

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

原文由 Jeff 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

真的很简单：

 <a :href="'mailto:' + email">{{email}}</a>

原文由 Иван Гончаренко 发布，翻译遵循 CC BY-SA 4.0 许可协议