这一节开始我们来学一下Vue中与列表渲染相关的东西，这部分知识很重要，而且还比较多，所以我就拆成几个小节来讲。那么这一小节我们就先讲讲基本列表，把基本列表讲清楚之后，我们再讲key的原理，列表过滤和列表排序
1.遍历列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列表渲染</title>
<!--引入Vue-->
<script type="text/javascript" src="../js/vue.js"></script>
<style>
</style>
</head>
<body>
<!--准备好一个容器-->
<div id="root">
<!-- 遍历列表 -->
<h2>人员列表</h2>
<ul>
<li v-for="p in persons">
{{p.name}} -- {{p.age}}
</li>
</ul>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
const vm = new Vue({
el:'#root',
data:{
persons:[
{id:'001',name:'张三',age:18},
{id:'002',name:'李四',age:19},
{id:'003',name:'王五',age:20}
]
},
methods: {
},
})
</script>
</html>
实现效果：
讲到这里这个遍历就已经实现了，但是这里还有一个特别重要的属性，就是key，我们这里不详谈这个属性，这一节我们只关注怎么配置这个属性即可，具体的深入分析内容会在下一节呈现。和key相关的内容我们可以在Vue官网的学习-->API中找到。
这个key属性就是给遍历的每一项加了一个特殊标识，虽然我们在Vue中不写这个key，也并不会报错，但是我们最好写上，至于为什么要写，我们会在下一节中说清楚。而且我们需要注意这里的key不能重复，如果有重复的key会让Vue报错。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列表渲染</title>
<!--引入Vue-->
<script type="text/javascript" src="../js/vue.js"></script>
<style>
</style>
</head>
<body>
<!--准备好一个容器-->
<div id="root">
<!-- 遍历列表 -->
<h2>人员列表</h2>
<ul>
<li v-for="p in persons" :key="p.id">
{{p.name}} -- {{p.age}}
</li>
</ul>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
const vm = new Vue({
el:'#root',
data:{
persons:[
{id:'001',name:'张三',age:18},
{id:'002',name:'李四',age:19},
{id:'003',name:'王五',age:20}
]
},
methods: {
},
})
</script>
</html>
其实这里写key不仅可以使用p.id这种形式，还可以用另外一种参数式的写法。我们下面可以先输出一下参数试试。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列表渲染</title>
<!--引入Vue-->
<script type="text/javascript" src="../js/vue.js"></script>
<style>
</style>
</head>
<body>
<!--准备好一个容器-->
<div id="root">
<!-- 遍历列表 -->
<h2>人员列表</h2>
<ul>
<li v-for="(a,b,c) in persons" >
{{a}} -- {{b}} -- {{c}}
</li>
</ul>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
const vm = new Vue({
el:'#root',
data:{
persons:[
{id:'001',name:'张三',age:18},
{id:'002',name:'李四',age:19},
{id:'003',name:'王五',age:20}
]
},
methods: {
},
})
</script>
</html>
实现效果：
我们可以看到这种参数式 的输出以后，第一个参数就是数组中的每个对象，而第二个参数就是每个对象在数组中对应的下标，不存在第三个参数。
所以我们的key就可以这样去写：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列表渲染</title>
<!--引入Vue-->
<script type="text/javascript" src="../js/vue.js"></script>
<style>
</style>
</head>
<body>
<!--准备好一个容器-->
<div id="root">
<!-- 遍历列表 -->
<h2>人员列表</h2>
<ul>
<li v-for="(p,index) in persons" :key="index">
{{p.name}} -- {{p.age}}
</li>
</ul>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
const vm = new Vue({
el:'#root',
data:{
persons:[
{id:'001',name:'张三',age:18},
{id:'002',name:'李四',age:19},
{id:'003',name:'王五',age:20}
]
},
methods: {
},
})
</script>
</html>
其实像(p,index) in persons这样的写法可以不加括号的，虽然不加括号也并不会报错，但是我们最好加上括号。因为如果不加括号的话，在一些老的脚手架中就会报错。
还有一个值得关注的点就是(p,index) in persons中的in也可以使用of来代替，这就是API的历史遗留问题。
2.遍历对象
我们同样使用上面的参数方式做一下遍历。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列表渲染</title>
<!--引入Vue-->
<script type="text/javascript" src="../js/vue.js"></script>
<style>
</style>
</head>
<body>
<!--准备好一个容器-->
<div id="root">
<!-- 遍历列表 -->
<h2>人员列表</h2>
<ul>
<li v-for="(p,index) in persons" :key="index">
{{p.name}} -- {{p.age}}
</li>
</ul>
<!-- 遍历对象 -->
<h2>汽车信息</h2>
<ul>
<li v-for="(value,k) in car" :key="k">
{{k}} -- {{value}}
</li>
</ul>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
const vm = new Vue({
el:'#root',
data:{
persons:[
{id:'001',name:'张三',age:18},
{id:'002',name:'李四',age:19},
{id:'003',name:'王五',age:20}
],
car:{
name:'奥迪a8',
price:'70万',
color:'黑色'
}
},
methods: {
},
})
</script>
</html>
实现效果：
从输出我们可以看到当遍历的是对象的时候，第一个参数是值，第二个参数是值对应的属性名称。
3.遍历字符串
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列表渲染</title>
<!--引入Vue-->
<script type="text/javascript" src="../js/vue.js"></script>
<style>
</style>
</head>
<body>
<!--准备好一个容器-->
<div id="root">
<!-- 遍历列表 -->
<h2>人员列表</h2>
<ul>
<li v-for="(p,index) in persons" :key="index">
{{p.name}} -- {{p.age}}
</li>
</ul>
<!-- 遍历对象 -->
<h2>汽车信息</h2>
<ul>
<li v-for="(value,k) in car" :key="k">
{{k}} -- {{value}}
</li>
</ul>
<!-- 遍历字符串 -->
<h2>字符串</h2>
<ul>
<li v-for="(value,index) in str" :key="index">
{{index}} -- {{value}}
</li>
</ul>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
const vm = new Vue({
el:'#root',
data:{
persons:[
{id:'001',name:'张三',age:18},
{id:'002',name:'李四',age:19},
{id:'003',name:'王五',age:20}
],
car:{
name:'奥迪a8',
price:'70万',
color:'黑色'
},
str:'hello'
},
methods: {
},
})
</script>
</html>
实现效果：
从输出我们可以看到当遍历的是字符串的时候，第一个参数是字符串中的字符，第二个参数是字符在字符串中的下标。
4.遍历指定次数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列表渲染</title>
<!--引入Vue-->
<script type="text/javascript" src="../js/vue.js"></script>
<style>
</style>
</head>
<body>
<!--准备好一个容器-->
<div id="root">
<!-- 遍历列表 -->
<h2>人员列表</h2>
<ul>
<li v-for="(p,index) in persons" :key="index">
{{p.name}} -- {{p.age}}
</li>
</ul>
<!-- 遍历对象 -->
<h2>汽车信息</h2>
<ul>
<li v-for="(value,k) in car" :key="k">
{{k}} -- {{value}}
</li>
</ul>
<!-- 遍历字符串 -->
<h2>字符串</h2>
<ul>
<li v-for="(value,index) in str" :key="index">
{{index}} -- {{value}}
</li>
</ul>
<!-- 遍历指定次数 -->
<h2>指定次数</h2>
<ul>
<li v-for="(value,index) in 5" :key="index">
{{index}} -- {{value}}
</li>
</ul>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
const vm = new Vue({
el:'#root',
data:{
persons:[
{id:'001',name:'张三',age:18},
{id:'002',name:'李四',age:19},
{id:'003',name:'王五',age:20}
],
car:{
name:'奥迪a8',
price:'70万',
color:'黑色'
},
str:'hello'
},
methods: {
},
})
</script>
</html>
实现效果：
从输出我们可以看到当遍历的是数字的时候，第一个参数是数字，第二个参数是数字所处的下标。
5.总结
v-for指令
1.用于展示列表数据
2.语法：v-for="(item,index) in xxx" :key="yyy"
3.可遍历：数组，对象，字符串（用的很少），指定次数（用的很少）
