一,前言
上一篇介绍了列表渲染指令v-for的使用
和列表相关的知识点还有如何实现列表的过滤和排序功能
在介绍列表过滤和排序功能时用到了计算属性
二,列表的搜索过滤
列表的搜索过滤功能,如通过外部输入对列表内容进行查询,
返回包含输入字符串内容的行项目信息
先看一下Demo:
<div id="app">
<input type="text" v-model="searchText">
<ul>
<li v-for="(book, index) in filterBooks" :key="index">
序号 : {{index}}, 书名 ; {{book.name}}, 价格 : {{book.price}}
</li>
</ul>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
searchText: '',
books: [
{name: 'Vue.js', price:50},
{name: 'Javascript', price:30},
{name: 'Css', price:40},
{name: 'Html', price:60}
]
},
// 计算属性
computed: {
filterBooks () {
const {searchText, books, orderType} = this
let filterArr = new Array();
// 过滤数组
filterArr = books.filter(p => p.name.indexOf(searchText) !== -1)
return filterArr;
}
}
})运行结果:
输入框键入字符s,对书名字段进行数据过滤,输出命中条目:
分析Demo:
data中books数组为原始数据
input中通过v-model="searchText"使输入框value值和data中searchText形成绑定关系
view中并没有直接渲染books数组中的数据,而是使用了计算属性filterBooks返回的新数组
通过filterBooks返回过滤后的新数组并对其进行页面渲染,完成过滤功能
基于计算属性的缓存原理,当计算属性所依赖的数据发生变化时,它才会重新执行
所以,当页面输入导致searchText变化时,触发计算属性filterBooks会重新执行
对books数据进行重新过滤并刷新页面显示,实现动态过滤数据功能
过滤数组核心代码:
filterArr = books.filter(p => p.name.indexOf(searchText) !== -1)
通过indexOf方法判断是否包含指定字符串,由filter方法返回新数组
此时books数组中的数据并没有被改变
三,列表的排序
在上边实现了过滤功能的列表中,为其添加排序功能,使其可以按照价格进行排序处理
<div id="app">
<input type="text" v-model="searchText">
<ul>
<li v-for="(book, index) in filterBooks" :key="index">
序号 : {{index}}, 书名 ; {{book.name}}, 价格 : {{book.price}}
</li>
</ul>
<div>
<button @click="setOrderType(2)">价格升序</button>
<button @click="setOrderType(1)">价格降序</button>
<button @click="setOrderType(0)">原始顺序</button>
</div>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
searchText: '',
orderType: 0, // 0:默认顺序, 1:价格降序, 2:价格升序
books: [
{name: 'Vue.js', price:50},
{name: 'Javascript', price:30},
{name: 'Css', price:40},
{name: 'Html', price:60}
]
},
computed: {
filterBooks () {
const {searchText, books, orderType} = this
let filterArr = new Array();
// 过滤数组
filterArr = books.filter(p => p.name.indexOf(searchText) !== -1)
// 排序
if(orderType) {
filterArr.sort(function (p1, p2) {
if(orderType === 1) { // 降序
return p2.price - p1.price;
} else { // 升序
return p1.price - p2.price;
}
})
}
return filterArr;
}
},
methods: {
setOrderType (orderType) {
this.orderType = orderType
}
}
})
</script>运行结果:
在列表过滤代码的基础上,为其添加了按照价格升序,降序,默认排序功能
在data中定义了orderType属性,区分并标记当前排序类型
并在methods中新增了setOrderType 方法,以通过按钮对排序类型进行设置
当点击升序排序时:
在对数组进行过滤的计算方法中,对过滤后的数组使用sort方法进行排序
并通过按钮设置的orderType值决定升序,降序和不排序
由于orderType的加入,使得计算方法filterBooks 依赖于orderType
当点击按钮致使orderType发生变化时,计算方法filterBooks 重新执行,并更新页面显示
降序和不排序以及过滤后再排序的情况不再做过多演示…
实现排序的核心代码:
主要依赖sort方法对数组进行排序:
filterArr.sort(function (p1, p2) {
if(orderType === 1) { // 降序
return p2.price - p1.price;
} else { // 升序
return p1.price - p2.price;
}
})
四,结束
列表的过滤和排序就说到这里,大多数的过滤排序都是这种做法
在对列表的排序和过滤中,使用到了计算属性,而计算属性又会涉及到和方法属性的对比
所以下一篇介绍Vue的methods选项,方法和事件,还有v-on的各种修饰符
之后再介绍计算属性computed,以及methods和computed的区别
再往后应该是v-bind及class与style的绑定
等到所有的指令都介绍完毕,会简单总结一下属性的选择和性能优化
把生命周期放到最后,是想通过前面的介绍先对Vue的使用有个大概了解
感觉这样在介绍生命周期会好理解一些吧