<!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="root"> <h2>人员列表信息(遍历数组):</h2> <hr> <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="p in filPersonList" :key="p.id"> {{p.id}}-{{p.name}}-{{p.age}}-{{p.sex}} </li> </ul> <hr> </div> </body> </html> <script type="text/javascript"> Vue.config.productionTip = false const vm = new Vue({ el: '#root', data: { keyWord: '', sortType: 0,//0 原顺序、1--降序、2--升序 personList: [ { id: '001', name: '乔峰', age: 28, sex: '男' }, { id: '002', name: '虚竹', age: 25, sex: '男' }, { id: '003', name: '段誉', age: 22, sex: '男' }, { id: '004', name: '童姥', age: 90, sex: '女' }, { id: '005', name: '李秋水', age: 88, sex: '女' }, ], }, computed: { // 简写,简写时确保不用settter // myfullname: function () { filPersonList () { const arr = this.personList.filter((p) => { return p.name.indexOf(this.keyWord) !== -1 }) // 排序 if (this.sortType) {//0false,1,2true arr.sort((p1, p2) => { return this.sortType === 1 ? p2.age - p1.age : p1.age - p2.age }) } return arr }, }, }) </script>
博客内容主要用于日常学习记录,内容比较随意,如有问题,还需谅解!!!