Sounds dumb but I can't find a way to pass a variable data defined in the href:
ComponentFile.vue I tried all of those:
<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'
}
}
What is the correct way?
Thanks!
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>
realy simple:
<a :href="'mailto:' + email">{{email}}</a>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.