vue.js Giving a value to a href in a <a> tag
You've defined data() as a function, but it isn't returning anything. It should return an object with the data like so:
export default { data() { return { url: 'http://anywhere.com' } }}Then either of these will work:
<a href="{{url}}">{{ url }}</a><a v-bind:href="url">{{ url }}</a>EDIT FOR VUE 2:
Interpolating variables in attributes is no longer recommended. Change:
<a href="{{url}}">{{ url }}</a>To one of these:
<a :href="url">{{ url }}</a><a v-bind:href="url">{{ url }}</a>
Try this:
<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>