vue3教程：v-bind指令绑定标签属性-马育民老师

# 介绍

`{{ text }}` 不能用在 元素的属性上，需要用 `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 type="importmap">
{
	"imports": {
		"vue": "./js/vue.esm-browser@3.5.13.js"
	}
}
</script>
<script type="module">
  import { createApp } from 'vue'
 
  createApp({
	data: function(){
		return { //数据
			name: "百度",
			url: "http://www.baidu.com"
		}	
	}
  }).mount('#app')
</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>
</ul>
```

```
<script src="https://unpkg.com/axios@0.21.1/dist/axios.min.js"></script>
<script type="importmap">
{
	"imports": {
		"vue": "./js/vue.esm-browser@3.5.13.js"
	}
}
</script>
<script type="module">
  import { createApp } from 'vue'
 
  createApp({
	data: function(){
		return{
	        books: []
		}
	},
	mounted:function(){
		const that = this
		axios.get('js/array2.json').then(function(res){
			console.log(res)
			console.log(res.data.books)
			that.books=res.data.books
		})
	}
	
  }).mount('#app')
```

原文出处：/show_1GWF3cKdgT9.html