javascript - 使用 Vue 为 anchor 标记中的 href 赋值

Question

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

组件文件.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'
  }
}

正确的做法是什么？

谢谢!

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>