介绍
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>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
js
<script>
var app = new Vue({
el: '#app',
data: {
books: ['html从入门到放弃','css从入门到入坟','葵花宝典']
}
})
</script>
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>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
注意：
不要使用对象或数组之类的非基本类型值作为 v-for 的 key。请用字符串或数值类型的值
报错
如果 key 值相同会报错，如下图：
代码如下：
<ul id="app">
<li v-for="item in books" :key="item">
{{ item }}
</li>
</ul>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script>
var app = new Vue({
el: '#app',
data: {
books: ["java","vue","html","vue","java"]
}
})
</script>
例子-显示索引
html
<ul id="app">
<li v-for="(item,index) in books" :key="index">
{{index}}. {{ item }}
</li>
</ul>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
注意：:key 也可以是 索引
js
<script>
var app = new Vue({
el: '#app',
data: {
books: ['html从入门到放弃','css从入门到入坟','葵花宝典']
}
})
</script>
例子：json数组
html
<div id="app">
<div v-for="item in books" :key="item.name">
{{ item.name }}
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
js
<script>
var app = new Vue({
el: '#app',
data: {
books: [
{ name: 'html从入门到放弃' },
{ name: 'css从入门到入坟' },
{ name: '葵花宝典' }
]
}
})
</script>
复杂例子：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>
let vue = new Vue({
el:"#app",
data:{
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" }
]
}
})
</script>
嵌套循环
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>
let vue = new Vue({
el:"#app",
data:{
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:["武林秘籍","男人必练"] }
]
}
})
</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.jsdelivr.net/npm/vue@2.6.12"></script>
<script src="https://cdn.staticfile.org/axios/0.20.0/axios.min.js"></script>
js
<script>
var app = new Vue({
el: '#app',
data: {
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
})
}
})
</script>
array.json文件内容
{
"books": [
{ "name": "html从入门到放弃" },
{ "name": "css从入门到入坟" },
{ "name": "葵花宝典" }
]
}