一、基础
1、v-for用来展示列表数据
2、语法 v-for="(value, index) in xx" :key="唯一标识"
3、可遍历：数组、对象、字符串
注意：先是值，再是索引
注意:key=""，key等于的值是唯一标识
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列表渲染-基础</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="container">
<h2>人员信息</h2>
<ul>
<li v-for="(p, index) in personArr" ::key="p.id">
{{p.name}}-{{p.age}}--{{index}}
</li>
</ul>
<h2>遍历对象</h2>
<ul>
<li v-for="(value, key, index) in personObj">
{{index}}-{{key}}-{{value}}
</li>
</ul>
</div>
<script>
new Vue({
el:"#container",
data:{
// 遍历数组
personArr:[
{id:"01", name:"张三", age:"40"},
{id:"02", name:"李四", age:"41"},
{id:"03", name:"王五", age:"42"},
],
//遍历对象
personObj:{
name:"王二麻子",
age:40,
sex:"男"
}
}
})
</script>
</body>
</html>二、key
:key="xxx"，xxx为唯一值，否则会影响效率和出错(只展示模式除外)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列表添加数据</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="container">
<h2>人员信息</h2>
<button @click="addData">添加数据</button>
<ul>
<li v-for="p in personArr" ::key="p.id">
{{p.name}}-{{p.age}}
</li>
</ul>
</div>
<script>
new Vue({
el:"#container",
data:{
// 遍历数组
personArr:[
{id:"01", name:"张三", age:"40"},
{id:"02", name:"李四", age:"41"},
{id:"03", name:"王五", age:"42"},
],
person:{id:"04", name:"李二", age:"22"}
},
methods: {
addData(){
this.personArr.unshift(this.person)
}
},
})
</script>
</body>
</html>三、过滤列表
借助计算属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列表添加数据</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="container">
<h2>人员信息搜索</h2>
<input type="text" v-model="keyWords">
<ul>
<li v-for="p in newPersons" :key="p.id">
{{p.name}}-{{p.age}}
</li>
</ul>
</div>
<script>
new Vue({
el:"#container",
data:{
// 遍历数组
personArr:[
{id:"01", name:"马冬梅", age:"40"},
{id:"02", name:"周冬雨", age:"41"},
{id:"03", name:"周杰伦", age:"42"},
{id:"04", name:"邓伦", age:"42"},
],
keyWords:"",
},
computed:{
newPersons(){
return this.personArr.filter((p)=>{
return p.name.indexOf(this.keyWords) !== -1
})
}
},
})
</script>
</body>
</html>四、列表排序
<!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>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="container">
<input type="text" placeholder="请输入姓名" v-model="keyWord">
<button @click="ascOrder">年龄升序</button>
<button @click="descOrder">年龄降序</button>
<button @click="noChange">顺序不变</button>
<br>
<ul>
<li v-for="p in filterPerson" :key="p.id">
{{p.name}}-{{p.age}}
</li>
</ul>
</div>
<script type="text/javascript">
new Vue({
el:"#container",
data:{
sortVal:0,
keyWord:"",
personArr:[
{id:"001", name:"马冬梅", age:40},
{id:"002", name:"周冬雨", age:30},
{id:"003", name:"周杰伦", age:35},
{id:"004", name:"温兆伦", age:42}
]
},
computed:{
filterPerson(){
// 根据姓名筛选
let arr = this.personArr.filter((p) => {
return p.name.indexOf(this.keyWord) !== -1
})
if (this.sortVal) {
// 根据年龄排序
arr.sort((p1, p2) => {
return this.sortVal===1? p1.age - p2.age : p2.age - p1.age
})
}
return arr
}
},
methods: {
noChange(){
return this.sortVal = 0
},
ascOrder(){
return this.sortVal = 1
},
descOrder(){
return this.sortVal = 2
}
},
})
</script>
</body>
</html>
