介绍
{{ text }} 不能用在 元素的属性上，需要用 v-bind 指令
官网：https://cn.vuejs.org/v2/api/#v-bind
用法：
<a v-bind:href="url">超链接</a>
缩写：
<a :href="url">超链接</a>
例子
<style>
[v-cloak] {
display: none;
}
</style>
<div id="app" v-cloak>
<a v-bind:href="url">{{name}}</a>
<a :href="url">{{name}}</a>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script>
var app = new Vue({
el: '#app',
data: {
name: "百度",
url: "http://www.baidu.com"
}
})
</script>
拼接字符串
v-bind 指令，可以像插值表达式那样，支持拼接字符串
<div id="app" v-cloak>
<a v-bind:href="url+'.jpg'">{{name}}</a>
<a :href="url+'.jpg'">{{name}}</a>
</div>
例子：ajax
准备数据文件
文件名字：array2.json
内容如下：
{
"books": [
{ "name": "html从入门到放弃","id":"1" },
{ "name": "css从入门到入坟","id":"2" },
{ "name": "葵花宝典","id":"3" }
]
}
代码
<ul id="app" v-cloak>
<li v-for="item in books" :key="item.id">
<a :href="'showById?id='+item.id" >{{item.name}}</a>
</li>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script src="https://unpkg.com/axios@0.21.1/dist/axios.min.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
books: []
},
mounted:function(){
that=this
axios.get('/array2.json').then(function(res){
console.log(res)
console.log(res.data.books)
that.books=res.data.books
})
}
})
</script>