RogerWorkPC
/
Vue_Demo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

完成列表排序的学习

Browse Source
mac_study
roger 2 years ago
parent ea40c8296a
commit 5db242ae0d
4 changed files with 167 additions and 37 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 36
      12_列表筛选/1.基础列表.html
  2. 38
      12_列表筛选/2.Key的原理.html
  3. 75
      12_列表筛选/3.列表过滤.html
  4. 55
      12_列表筛选/4.列表排序.html

36
12_列表筛选/1.基本列表.html → 12_列表筛选/1.基础列表.html
Unescape View File

@ -9,16 +9,26 @@
<div id="root"> <div id="root">
<!-- 遍历列表--> <!-- 遍历列表-->
<h2>人员列表</h2> <h2>人员列表</h2>
<button @click.once="addPerson">添加一个人</button>
<ul> <ul>
<!-- 方法一--> <!-- 方法一-->
<!-- <li v-for="d in listData" :key="d.id">{{d.name}} - {{d.age}}</li>--> <!-- <li v-for="d in listData" :key="d.id">{{d.name}} - {{d.age}}</li>-->
<!-- 方法二--> <!-- 方法二-->
<li v-for="(data, index) in listData" :key="data.id"> <li v-for="(data, index) in listData" :key="index">{{data.name}} - {{data.age}}</li>
{{data.name}} - {{data.age}} </ul>
<input type="text"> <!-- 遍历对象-->
</li> <h2>汽车信息</h2>
<ul>
<li v-for="(key, value) of car" :key="key">{{key}} - {{value}}</li>
</ul>
<!-- 遍历字符串-->
<h2>字符串信息</h2>
<ul>
<li v-for="(c, index) of testStr" :key="index">{{c}} - {{index}}</li>
</ul>
<!-- 遍历固定次数-->
<h2>固定遍历</h2>
<ul>
<li v-for="(number, index) of 5" :key="index">{{number}} - {{index}}</li>
</ul> </ul>
</div> </div>
</body> </body>
@ -31,13 +41,13 @@
{id: 1, name: '张三', age: 18}, {id: 1, name: '张三', age: 18},
{id: 2, name: '李四', age: 19}, {id: 2, name: '李四', age: 19},
{id: 3, name: '王五', age: 20} {id: 3, name: '王五', age: 20}
] ],
}, car: {
methods:{ name: "特斯拉",
addPerson() { model: "Model3",
const p = {id: 0, name: "赵老大", age: 80} price: "29.9w"
this.listData.unshift(p) },
} testStr: "Hello!"
} }
}) })

38
12_列表筛选/2.Key的原理.html
Unescape View File

@ -2,33 +2,23 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>基本列表</title> <title>Key的原理</title>
<script type="text/javascript" src="../vue.js"></script> <script type="text/javascript" src="../vue.js"></script>
</head> </head>
<body> <body>
<div id="root"> <div id="root">
<!-- 遍历列表--> <!-- 遍历列表-->
<h2>人员列表</h2> <h2>人员列表</h2>
<button @click.once="addPerson">添加一个人</button>
<ul> <ul>
<!-- 方法一--> <!-- 方法一-->
<!-- <li v-for="d in listData" :key="d.id">{{d.name}} - {{d.age}}</li>--> <!-- <li v-for="d in listData" :key="d.id">{{d.name}} - {{d.age}}</li>-->
<!-- 方法二--> <!-- 方法二-->
<li v-for="(data, index) in listData" :key="index">{{data.name}} - {{data.age}}</li> <li v-for="(data, index) in listData" :key="data.id">
</ul> {{data.name}} - {{data.age}}
<!-- 遍历对象--> <input type="text">
<h2>汽车信息</h2> </li>
<ul>
<li v-for="(key, value) of car" :key="key">{{key}} - {{value}}</li>
</ul>
<!-- 遍历字符串-->
<h2>字符串信息</h2>
<ul>
<li v-for="(c, index) of testStr" :key="index">{{c}} - {{index}}</li>
</ul>
<!-- 遍历固定次数-->
<h2>固定遍历</h2>
<ul>
<li v-for="(number, index) of 5" :key="index">{{number}} - {{index}}</li>
</ul> </ul>
</div> </div>
</body> </body>
@ -41,13 +31,13 @@
{id: 1, name: '张三', age: 18}, {id: 1, name: '张三', age: 18},
{id: 2, name: '李四', age: 19}, {id: 2, name: '李四', age: 19},
{id: 3, name: '王五', age: 20} {id: 3, name: '王五', age: 20}
], ]
car: { },
name: "特斯拉", methods:{
model: "Model3", addPerson() {
price: "29.9w" const p = {id: 0, name: "赵老大", age: 80}
}, this.listData.unshift(p)
testStr: "Hello!" }
} }
}) })

75
12_列表筛选/3.列表过滤.html
Unescape View File

@ -0,0 +1,75 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表过滤</title>
<script type="text/javascript" src="../vue.js"></script>
</head>
<body>
<div id="root">
<!-- 遍历列表-->
<h2>人员列表</h2>
<input type="text" placeholder="输入关键词" v-model="keyword">
<ul>
<li v-for="(data, index) in filterData" :key="data.id">
{{data.name}} - {{data.age}} - {{data.sex}}
</li>
</ul>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
// 使用watch实现
// const vm = new Vue({
// el: "#root",
// data: {
// keyword: '',
// listData: [
// {id: 1, name: '马冬梅', age: 18, sex: '女'},
// {id: 2, name: '周冬雨', age: 19, sex: '女'},
// {id: 3, name: '周杰伦', age: 20, sex: '男'},
// {id: 4, name: '温兆伦', age: 21, sex: '男'}
// ],
// filterData: []
// },
// watch: {
// // keyword(val) {
// // this.listData = this.listData.filter((p) => {
// // return p.name.indexOf(val) !== -1
// // })
// // }
// keyword: {
// immediate: true,
// handler(val) {
// this.filterData = this.listData.filter((p) => {
// return p.name.indexOf(val) !== -1
// })
// }
// }
// }
// })
// 使用computed实现
const vm = new Vue({
el: "#root",
data: {
keyword: '',
listData: [
{id: 1, name: '马冬梅', age: 18, sex: '女'},
{id: 2, name: '周冬雨', age: 19, sex: '女'},
{id: 3, name: '周杰伦', age: 20, sex: '男'},
{id: 4, name: '温兆伦', age: 21, sex: '男'}
],
},
computed: {
filterData() {
return this.listData.filter((p) => {
return p.name.indexOf(this.keyword) !== -1
})
}
}
})
</script>
</html>

55
12_列表筛选/4.列表排序.html
Unescape View File

@ -0,0 +1,55 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表过滤</title>
<script type="text/javascript" src="../vue.js"></script>
</head>
<body>
<div id="root">
<!-- 遍历列表-->
<h2>人员列表</h2>
<input type="text" placeholder="输入关键词" v-model="keyword">
<button @click="sortType=2">年龄升序</button>
<button @click="sortType=1">年龄降序</button>
<button @click="sortType=0">原顺序</button>
<ul>
<li v-for="(data, index) in filterData" :key="data.id">
{{data.name}} - {{data.age}} - {{data.sex}}
</li>
</ul>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
// 使用computed实现
const vm = new Vue({
el: "#root",
data: {
keyword: '',
sortType: 0, // 0-原顺序 1-年龄降序 2-年龄升序
listData: [
{id: 1, name: '马冬梅', age: 25, sex: '女'},
{id: 2, name: '周冬雨', age: 19, sex: '女'},
{id: 3, name: '周杰伦', age: 20, sex: '男'},
{id: 4, name: '温兆伦', age: 17, sex: '男'}
],
},
computed: {
filterData() {
const arr = this.listData.filter((p) => {
return p.name.indexOf(this.keyword) !== -1
})
if (this.sortType){
arr.sort((a,b) => {
return this.sortType === 1 ? b.age - a.age : a.age - b.age
})
}
return arr
}
}
})
</script>
</html>
Write Preview
Loading…
Cancel
Save