vue.js 给 <a> 标签中的 href 赋值答案

【问题标题】：vue.js Giving a value to a href in a <a> tagvue.js 给 <a> 标签中的 href 赋值
【发布时间】：2016-04-22 21:20:56
【问题描述】：

听起来很愚蠢，但我找不到传递在 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'
  }
}

正确的方法是什么？

谢谢！

【问题讨论】：

标签： javascript html laravel vue.js

【解决方案1】：

真的很简单：

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

【讨论】：

【解决方案2】：

您已将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>

【讨论】：

如何与字符串进行连接。
给了我
对于 vitepress <a v-bind:href="url">{{ url }}</a> 工作正常。第一种方法没用。

【解决方案3】：

试试这个：

<div id="app">
   <a href="{{ url }}">{{ url }}</a>
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.10/vue.min.js"></script>
<script>
  new Vue({
    el: '#app', // Vue.js will just work inside the div with id of app
    data: {
      url: 'http://anywhere.com' 
    }
  });
</script>

【讨论】：