基础显示

在data钩子中定义好数据数组，并使用v-for在li标签中进行展示，并给每一个li标签绑定自己的key(借助第三方库shortid生成独一无二的id)

<template><div><h3>搜索列表</h3><label><input type="text" placeholder="请输入要搜索的姓名" v-model="searchName"></label><ul><li v-for="(person,index) in persons" :key="personsKeys[index]">{{index+1}})姓名：{{person.name}} —— 性别：{{person.sex}} —— 年龄：{{person.age}} —— 电话：{{person.phone}}</li></ul></div>
</template><script>
import shortid from 'shortid'
export default {name: "ListRenderTwo",data() {return {searchName:'',persons: [{name: '张三', sex: '女', age: 19, phone: '12344552121'},{name: '李四', sex: '男', age: 29, phone: '12344952162'},{name: '王五', sex: '男', age: 39, phone: '12344852193'},{name: '赵六', sex: '女', age: 49, phone: '12344562184'},{name: '保国', sex: '女', age: 39, phone: '12344552175'},{name: '张三', sex: '男', age: 29, phone: '12344252166'},{name: '李四', sex: '女', age: 49, phone: '12344572157'},{name: '王五', sex: '男', age: 19, phone: '12344652118'},{name: '赵六', sex: '女', age: 39, phone: '12344552129'},{name: '保国', sex: '男', age: 69, phone: '12344552136'},{name: '张三', sex: '女', age: 59, phone: '12344552167'},{name: '李四', sex: '女', age: 39, phone: '12344552188'},{name: '王五', sex: '女', age: 59, phone: '12344552159'},{name: '赵六', sex: '男', age: 49, phone: '12344552191'},{name: '保国', sex: '男', age: 19, phone: '12344552172'},{name: '张三', sex: '女', age: 29, phone: '12344552156'},{name: '李四', sex: '女', age: 39, phone: '12344552134'},{name: '王五', sex: '女', age: 19, phone: '12344552125'},],personsKeys:[]}},mounted() {this.personsKeys = this.persons.map(v=>shortid.generate())}
}
</script><style scoped>
ul,li{list-style: none;
}
li{margin: 5px;
}
</style>

运行结果：

过滤

思路：输入关键字后，通过计算属性得到新的数组进行展示。新的数组初始情况下是等于所有人数组的，输入姓名后，会进行过滤，然后进行展示。
关键代码

computed: {filterPersons() {// 获取数据let {searchName, persons} = this;// 取出数组中的数据let arr = [...persons];// 过滤数组if (searchName.trim()) {arr = persons.filter(p => p.name.indexOf(searchName) !== -1);}return arr;}}

完整代码

<template><div><h3>搜索列表</h3><label><input type="text" placeholder="请输入要搜索的姓名" v-model="searchName"></label><ul><li v-for="(person,index) in filterPersons" :key="personsKeys[index]">{{ index + 1 }})姓名：{{ person.name }} —— 性别：{{ person.sex }} —— 年龄：{{ person.age }} —— 电话：{{ person.phone }}</li></ul></div>
</template><script>
import shortid from 'shortid'export default {name: "ListRenderTwo",data() {return {searchName: '',persons: [{name: '张三', sex: '女', age: 19, phone: '12344552121'},{name: '李四', sex: '男', age: 29, phone: '12344952162'},{name: '王五', sex: '男', age: 39, phone: '12344852193'},{name: '赵六', sex: '女', age: 49, phone: '12344562184'},{name: '保国', sex: '女', age: 39, phone: '12344552175'},{name: '张三', sex: '男', age: 29, phone: '12344252166'},{name: '李四', sex: '女', age: 49, phone: '12344572157'},{name: '王五', sex: '男', age: 19, phone: '12344652118'},{name: '赵六', sex: '女', age: 39, phone: '12344552129'},{name: '保国', sex: '男', age: 69, phone: '12344552136'},{name: '张三', sex: '女', age: 59, phone: '12344552167'},{name: '李四', sex: '女', age: 39, phone: '12344552188'},{name: '王五', sex: '女', age: 59, phone: '12344552159'},{name: '赵六', sex: '男', age: 49, phone: '12344552191'},{name: '保国', sex: '男', age: 19, phone: '12344552172'},{name: '张三', sex: '女', age: 29, phone: '12344552156'},{name: '李四', sex: '女', age: 39, phone: '12344552134'},{name: '王五', sex: '女', age: 19, phone: '12344552125'},],personsKeys: []}},mounted() {this.personsKeys = this.persons.map(v => shortid.generate())},computed: {filterPersons() {// 获取数据let {searchName, persons} = this;// 取出数组中的数据let arr = [...persons];// 过滤数组if (searchName.trim()) {arr = persons.filter(p => p.name.indexOf(searchName) !== -1);}return arr;}}
}
</script><style scoped>
ul, li {list-style: none;
}li {margin: 5px;
}
</style>

排序

思路：使用一个参数记录排序方式，根据排序方式对显示的人员数组进行排序。
关键代码

computed: {filterPersons() {// 获取数据let {searchName, persons, orderType} = this;// 取出数组中的数据let arr = [...persons];// 过滤数组if (searchName.trim()) {arr = persons.filter(p => p.name.indexOf(searchName) !== -1);}// 排序if (orderType) {arr.sort((p1, p2) => {if (orderType === 1) {//  降序return p2.age-p1.age;} else if (orderType === 2) {// 升序return p1.age-p2.age;} else {}})}return arr;}
},
methods: {orderByAge(orderType) {this.orderType = orderType;}
}

完整代码

<template><div><h3>搜索列表</h3><div><h3>排序</h3><button @click="orderByAge(0)">默认</button><button @click="orderByAge(2)">年龄↑</button><button @click="orderByAge(1)">年龄↓</button></div><p>----------------------------------------------------------------------------------</p><label><input type="text" placeholder="请输入要搜索的姓名" v-model="searchName"></label><ul><li v-for="(person,index) in filterPersons" :key="personsKeys[index]">{{ index + 1 }})姓名：{{ person.name }} —— 性别：{{ person.sex }} —— 年龄：{{ person.age }} —— 电话：{{ person.phone }}</li></ul></div>
</template><script>
import shortid from 'shortid'export default {name: "ListRenderTwo",data() {return {searchName: '',persons: [{name: '张三', sex: '女', age: 19, phone: '12344552121'},{name: '李四', sex: '男', age: 29, phone: '12344952162'},{name: '王五', sex: '男', age: 39, phone: '12344852193'},{name: '赵六', sex: '女', age: 49, phone: '12344562184'},{name: '保国', sex: '女', age: 39, phone: '12344552175'},{name: '张三', sex: '男', age: 29, phone: '12344252166'},{name: '李四', sex: '女', age: 49, phone: '12344572157'},{name: '王五', sex: '男', age: 19, phone: '12344652118'},{name: '赵六', sex: '女', age: 39, phone: '12344552129'},{name: '保国', sex: '男', age: 69, phone: '12344552136'},{name: '张三', sex: '女', age: 59, phone: '12344552167'},{name: '李四', sex: '女', age: 39, phone: '12344552188'},{name: '王五', sex: '女', age: 59, phone: '12344552159'},{name: '赵六', sex: '男', age: 49, phone: '12344552191'},{name: '保国', sex: '男', age: 19, phone: '12344552172'},{name: '张三', sex: '女', age: 29, phone: '12344552156'},{name: '李四', sex: '女', age: 39, phone: '12344552134'},{name: '王五', sex: '女', age: 19, phone: '12344552125'},],personsKeys: [],orderType: 0}},mounted() {this.personsKeys = this.persons.map(v => shortid.generate())},computed: {filterPersons() {// 获取数据let {searchName, persons, orderType} = this;// 取出数组中的数据let arr = [...persons];// 过滤数组if (searchName.trim()) {arr = persons.filter(p => p.name.indexOf(searchName) !== -1);}// 排序if (orderType) {arr.sort((p1, p2) => {if (orderType === 1) {//  降序return p2.age - p1.age;} else if (orderType === 2) {// 升序return p1.age - p2.age;}})}return arr;}},methods: {orderByAge(orderType) {this.orderType = orderType;}}
}
</script><style scoped>
ul, li {list-style: none;
}li {margin: 5px;
}button {margin-left: 20px;
}
</style>

Vue：数组的过滤排序显示客户端实现相关推荐

Vue 数组更新与排序过滤
前面的话 Vue 的核心是数据与视图的双向绑定,当我们修改数组时,Vue会检测到数据变化,所以用v-for 渲染的视图也会立即更新.Vue为了增加列表渲染的功能,增加了一组观察数组的方法,而且可以显示 ...
vue 数组按时间排序
<template><div><el-button @click="sort()">时间排序</el-button></div ...
Vue数组更新及过滤排序功能
Vue为了增加列表渲染的功能,增加了一组观察数组的方法,而且可以显示一个数组的过滤或排序的副本.本文将详细介绍Vue数组更新及过滤排序前面的话 Vue为了增加列表渲染的功能,增加了一组观察数组的方法 ...
php 从大到小显示,vue.js,javascript_Vue 在列表渲染的时候，能排序显示么。比如按价格从大到小排序，vue.js,javascript - phpStudy...
Vue 在列表渲染的时候,能排序显示么. 比如按价格从大到小排序 // json { "data": [ { "name": "山鹰登山社" ...
vue 敏感词过滤前端
vue 敏感词过滤前端根据正则来进行过滤敏感词是一个数组词比较多专门存放在js文件里面 vue用 export 导出再引入到需要用的组件里 judgeBadWord(obj) {let w ...
【Vue.JS】Vue.JS 表格内容排序组件，Render函数的使用
声明:文中代码整体思路来源于梁灏编著的 [Vue.JS 实战]一书,学习过程中因觉得该组件效果不错,比较实用,所以记录一份并做了详细的注释以供学习效果图代码 index.html <!D ...
基于vue 通过数据过滤实现表格合并
基于vue 通过数据过滤实现表格合并需求基于vue渲染的数据表格需要对相同的列进行合并思路自从使用了vue,就再也不想直接操作dom节点了,所以还是对数据操作. 要合并单元格需要用到row ...
【Demo】IOS中将对象数组按照时间戳排序
将对象按照时间戳排序,这里典型的一个例子是登录账户的排序:本地客户端可能保存了多个账户信息,在登录窗口用户可以选择已经登陆过的账户直接登录,现在的需求是要时刻让最近登陆过的账户排在前面,对于每个账户, ...
vue 数组元素替换_11. VUE 数组操作
变异方法 Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新.这些方法如下: push() 添加元素 {{ item.message }} varexample1= newVue({ el ...
c# 逆转数组元素的排序
c#中逆转数组元素的排序实例代码如下: private string[] G_str_array;//定义字符串数组字段 private void Frm_Main_Load(object sende ...

Vue：数组的过滤排序显示客户端实现

基础显示

过滤

排序

Vue：数组的过滤排序显示客户端实现相关推荐

最新文章

热门文章