vue3教程-v-for指令（循环）-马育民老师

# 介绍

`v-for` 指令循环数组，进行渲染。
`v-for` 指令 相当于 `for in ` 循环语句，需要使用 `item in items` 形式，其中 `items` 是源数据数组，而 `item` 则是被迭代的数组元素的别名。

**注意：** 永远不要把 `v-if` 和 `v-for` 用在同一个元素上

# 例子

### html
```
<ul id="app">
    <li v-for="item in books" :key="item">
        {{ item }}
    </li>
</ul>
```

### js

# key的作用

为了方便vue区分各个元素，从而重用和重新排序现有元素，需要为每项提供 `key` 属性，其值 **唯一**

**作用：**

- 提高性能
- 是 Vue 识别节点的一个通用机制，`key` 不仅与 `v-for` 关联，还有其它用途。

建议在使用 `v-for` 时提供 `key` 属性，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。

如下：
```
<ul id="app">
    <li v-for="item in books" :key="item">
        {{ item }}
    </li>
</ul>
```

**注意：**
不要使用对象或数组之类的非基本类型值作为 v-for 的 key。请用字符串或数值类型的值

### 报错

如果 `key` 值相同会报错，如下图：

[![](/upload/0/0/1IX43Fi5SkaT.png)](/upload/0/0/1IX43Fi5SkaT.png)

代码如下：

```
<ul id="app">
    <li v-for="item in books" :key="item">
        {{ item }}
    </li>
</ul>
```

```
<script type="module">
  import { createApp } from 'vue'
 
  createApp({
	data: function(){
		return { //数据
			books: ["java","vue","html","vue","java"]
		}	
	}
  }).mount('#app')
</script>
```

# 例子-显示索引

### html
```
<ul id="app">
    <li v-for="(item,index) in books" :key="index">
        {{index}}. {{ item }}
    </li>
</ul>
```

**注意：**`:key` 也可以是 索引

### js

```
<script type="module">
  import { createApp } from 'vue'
 
  createApp({
	data: function(){
		return { //数据
			books: ['html从入门到放弃','css从入门到入坟','葵花宝典']
		}	
	}
  }).mount('#app')
</script>
```

# 例子：json数组

### html
```
<div id="app">
    <div v-for="item in books" :key="item.name">
        {{ item.name }}
    </div>
</div>
```

### js

# 复杂例子：json数组

实现头条新闻功能

数组中的元素是 对象，对象中有以下属性：

- `title`：标题
- `author`：作者
- `url`：超链接

标题有 a 标签，点击可以打开网页

### html

```
<div id="app">
    <table border="1">
        <tr>
            <td>序号</td>
            <td>标题</td>
            <td>作者</td>
        </tr>
        <tr v-for="(item,index) in books" :key="index">
            <td>{{index+1}}</td>
            <td><a :href="item.url" target="_blank">{{item.title}}</a></td>
            <td>{{item.author}}</td>
        </tr>
    </table>

</div>
```

### js

```
<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: [
				{ title: 'html从入门到放弃',author:"李雷",url:"http://www.baidu.com" },
				{ title: 'css从入门到入坟',author:"lucy",url:"http://www.toutiao.com" },
				{ title: '葵花宝典',author:"lili",url:"http://www.jd.com" }
			]
		}	
	}
  }).mount('#app')
```

# 嵌套循环

### html

```
<div id="app">
    <table border="1">
        <tr>
            <td>序号</td>
            <td>书名</td>
            <td>价格</td>
            <td>作者</td>
            <td>标签</td>
            <td>操作</td>
        </tr>
        <tr v-for="(item,index) in books2" :key="index">
            <td>{{index+1}}</td>
            <td>{{item.name}}</td>
            <td>{{item.price}}</td>
            <td >
                <span v-for="(tag,tagIndex) in item.tag" :key="tagIndex">
                {{tag}}
                </span>
            </td>
            <td>{{item.author}}</td>
            <td>
                <a href="">修改</a>
                <a href="">删除</a>
            </td>
        </tr>
    </table>
</div>
```

### js

```
<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 { //数据
			books2: [
				{ id:10,name: 'html从入门到放弃',price:20,author:"李雷",tag:["计算机","前端"] },
				{ id:20,name: 'css从入门到入坟',price:30,author:"lucy",tag:["计算机","前端"] },
				{ id:30,name: '葵花宝典',price:40,author:"lili",tag:["武林秘籍","男人必练"] }
			]
		}	
	}
  }).mount('#app')
</script>
```

# 例子3-axios

### html

```
<div id="app">
    <table border="1">
    	<tr>
    		<td>书名</td>
    		<td>操作</td>
    	</tr>
    	<tr v-for="item in books" :key="item.name">
    		<td>{{ item.name }}</td>
    		<td>
    			<a href="#">删除</a>  
    			<a href="#">修改</a>
    		</td>
    	</tr>
    </table>
</div>
<script src="https://cdn.staticfile.org/axios/0.20.0/axios.min.js"></script>
```

### js

```
<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(){
        that=this
        axios.get('/array.json').then(function(res){
            console.log(res)
            console.log(res.data.books)
            that.books=res.data.books
        })
    }
  }).mount('#app')
</script>
```

### array.json文件内容

```
{
    "books": [
            { "name": "html从入门到放弃" },
            { "name": "css从入门到入坟" },
            { "name": "葵花宝典" }
        ]
}
```

原文出处：http://malaoshi.top/show_1GWEgfsQ4kM.html