舔狗是这样实现列表过滤和列表排序滴
如果你是一个舔狗，又不会写舔狗日记，又恰好会一点点Vue的话，恭喜你这篇舔狗拯救手册可以帮助你顺利处到 {}
干活干活！首先搭建好Vue基本模板
<body>
<div id="app">
<input type="text">
<ul>
<li></li>
</ul>
</div>
<script src="./js/vue.js"></script>
<script>
const vm = new Vue({
el:'#app',
data(){
return {
}
},
computed:{
}
})
</script>
</body>
在进行列表过滤和列表排序之前，先了解一下列表渲染
- 话不多说，先看效果
- 来狗，上代码！
<div id="app">
<ul>
<li v-for="(person, index) in persons" :key="person.id">
{{person.id +'号是'+person.name + '，有' + person.age + '岁啦！'}}
</li>
</ul>
</div>
<script src="./js/vue.js"></script>
<script>
const vm = new Vue({
el:'#app',
data(){
return{
persons:[
{id:1,name:'牛马',age:19},
{id:2,name:'羊驼',age:20},
{id:3,name:'酷狗',age:10},
{id:4,name:'菲菲',age:18}
]
}
}
})
</script>
- 怎么搞的捏：首先将由对象组成的数组暴露出去，这样
id,name和age,这样一个li就渲染完了一个数据，用原生渲染的话就得老老实实用js遍历，但别忘了在Vue中可以在标签中通过v-for来进行遍历（属实很香，语法看不懂自己去搜）。注意：遍历一定要绑定唯一标识key(简单来讲就是虚拟dom进行比较时所参照的唯一标识)
学完列表渲染就可以开始你的表演了（列表过滤和列表排序）
效果如下
以下是砸门的数据（舔狗日记）
data(){
return {
words:[
{id:1,word:'你终于喊我双排了，让我拿我胜率最高的英雄。我一般都不玩的，因为胜率太高了怕掉，可是为了你我还是选了，你好像很开心给我发了句“fw”，我懂了，你是想夸夸我说我法王，你真好！我越来越喜欢你了。'},
{id:2,word:'给你买的iPhone11刚分期完，iPhone12就出了，这个时候你来找我复合，我就知道你还是爱我的，谢谢你苹果公司！'},
{id:3,word:'上周我给你发了520的红包你收到了什么都没说，今天你给我分享了lv包包的淘宝链接说你看上了好久。我用最后一点花呗额度帮你拍下了这个包包，你一定是想让我成为在你背后默默为你撑腰保驾护航的男人吧，想到这里，就有了还下个月花呗的动力了。'},
{id:4,word:'上课用镜子偷偷在看你，想着光的反射，你看我这边你就可以看到我，一节课硬是没看到你在看我。'},
{id:5,word:'今天在微博发现了好好笑的事情，想分享给你，可是当我发给你的时候迎接我的只有一个大大的红色感叹号，对啊，今天是你把我删了的第九十六天呀。真的太真实了吧，我翻看了一下我们的聊天记录，喜欢和爱你都没有给我说过，我知道我不好看还有斑但是我真的喜欢你啊，太心酸了。'},
{id:6,word:'我可以再见你一面吗，我可以站远一点，不让你同事发现我。'},
{id:7,word:'你说别缠着你了并给我看了你女朋友的照片，啊~不愧是你！女朋友都这么漂亮~'},
{id:8,word:'今天你又来我们班看美女了，路过的时候瞥了一眼坐在第一排的我，我就知道你心里还是有我的。啊！真是美好的一天！'},
{id:9,word:'今天一个女孩子对我表白说喜欢我，可是我的心里只有你啊，我立马拒绝了她，她说她不会放弃的，我的心里只有你一个人啊，不会答应她的。'},
{id:10,word:'你知道吗？流星雨划过天空的时候，我许了一个你愿望成真的愿望。'},
{id:11,word:'听说你和你的女友分手了，我以为机会来了。没想到你又有了新的女友。'},
{id:12,word:'我发了条朋友圈，她去点赞了，我高兴的把她截屏并发给她，问他：你是不是有啥想对我说的？她下一秒把点赞取消，告诉我“你看我没点赞”。'},
{id:13,word:'多希望有一天你对我说：“宝，早安！”，而不是：“早，保安！”'}
],
keyword:'',
sortType:0
}
},
先讲一下列表过滤（通过computed）
- 说到过滤，我们得先有过滤条件，我在data中新加入了一个属性
keyword：‘’,然后和输入过滤条件的标签进行双向数据绑定（v-model="keyword"） - 然后就是过滤啥了，你得先拿到从data中拿到数组
words和过滤条件keyword
<div id="app">
<input type="text" placeholder="请输入过滤关键词" v-model="keyword">
<ul>
<li>li>
ul>
div>
computed:{
newWords(){
//这儿可以通过解构赋值的方法
let {keyword,words} = this;
}
}
- 东西拿到后就开始过滤了，说到过滤一定绝对要想到
filter方法，这一步一定要很熟悉这个方法
//拿一个新数组接一下words过滤完的结果
let newArr = words.filter((item,index)=>{
/* 过滤是通过item里面的word来过滤的，所以可以用indexof的方法，如果word中有keyword中的内容
会返回一个下标，没有则返回-1，即return的是keyword在item.word中的索引（代表item中有keyword）
filter得到一个>=0的返回值，这样该item就被存入到了newArr中，如此循环完成了过滤
*/
return item.word.indexOf(keyword) != -1
})
- 接着将过滤完的结果返回给
computed，到这儿,恭喜你完成了列表过滤的99%
//合起来是这样子滴
computed:{
newWords(){
let {keyword,words,sortType} = this;
let newArr = words.filter((item,index)=>{
return item.word.indexOf(keyword) != -1
})
return newArr
}
- 最后一步便是渲染了，之前学完了列表渲染这儿就easy得一批了，直接把
computed计算出来的newWords拿来渲染就完了
<div id="app">
<input type="text" placeholder="请输入过滤关键词" v-model="keyword">
<ul v-for="(oneWord, index) in newWords" :key="index">
<li>{{oneWord.word}}li>
ul>
div>
趁热打铁，开始玩列表排序
- 排序是通过数据中
word的字数进行排序的 - 为了排序有三种状态，我可以在数据中新添加一个属性
sortType(排序类型)来存放三种排序状态（分别对应0,1,2） - 先上html结构，相比过滤也就新添加了三个按钮（一个代表升序，一个代表降序，一个原序），分别点击不同的按钮会修改
sortType的值来表达三种状态
<div id="app">
<input type="text" placeholder="请输入过滤关键词" v-model="keyword">
<button @click="sortType = 1">按字数升序button>
<button @click="sortType = 0">原序button>
<button @click="sortType = 2">按字数降序button>
<ul v-for="(oneWord, index) in newWords" :key="index">
<li>{{oneWord.word}}li>
ul>
div>
- 接下来便是在之前过滤上的基础上继续进行加工了，这个过程同样是在
computed中进行的，上代码
computed:{
newWords(){
let {keyword,words,sortType} = this;
let newArr = words.filter((item,index)=>{
return item.word.indexOf(keyword) != -1
})
//当sortType 的值大于0即不是原排序的时候进入if判断
if(sortType != 0){
//这个newArr是过滤完后的数据，接着通过sort排序
newArr.sort((a,b) => {
if(sortType === 1){
//由于是通过字符长度进行排序，取出word后length方法即可算出长度（看不懂以下得去看下sort排序）
return a.word.length - b.word.length;
}else{
return b.word.length - a.word.length;
}
})
}
return newArr
}
}
- 优化：
sort排序可以简写为以下代码
//三元表达式
newArr.sort((a,b) => sortType === 1 ? a.word.length - b.word.length : b.word.length - a.word.length)
- 需注意的是
sort方法是在原数组身上直接进行排序，因此没有返回值，也就没必要拿一个新数组去接
然后，然后就没了，直接上源码
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表过滤+排序title>
head>
<body>
<div id="app">
<input type="text" placeholder="请输入过滤关键词" v-model="keyword">
<button @click="sortType = 1">按字数升序button>
<button @click="sortType = 0">原序button>
<button @click="sortType = 2">按字数降序button>
<ul v-for="(oneWord, index) in newWords" :key="index">
<li>{{oneWord.word}}li>
ul>
div>
<script src="./js/vue.js">script>
<script>
const vm = new Vue({
el:'#app',
data(){
return {
words:[
{id:1,word:'你终于喊我双排了，让我拿我胜率最高的英雄。我一般都不玩的，因为胜率太高了怕掉，可是为了你我还是选了，你好像很开心给我发了句“fw”，我懂了，你是想夸夸我说我法王，你真好！我越来越喜欢你了。'},
{id:2,word:'给你买的iPhone11刚分期完，iPhone12就出了，这个时候你来找我复合，我就知道你还是爱我的，谢谢你苹果公司！'},
{id:3,word:'上周我给你发了520的红包你收到了什么都没说，今天你给我分享了lv包包的淘宝链接说你看上了好久。我用最后一点花呗额度帮你拍下了这个包包，你一定是想让我成为在你背后默默为你撑腰保驾护航的男人吧，想到这里，就有了还下个月花呗的动力了。'},
{id:4,word:'上课用镜子偷偷在看你，想着光的反射，你看我这边你就可以看到我，一节课硬是没看到你在看我。'},
{id:5,word:'今天在微博发现了好好笑的事情，想分享给你，可是当我发给你的时候迎接我的只有一个大大的红色感叹号，对啊，今天是你把我删了的第九十六天呀。真的太真实了吧，我翻看了一下我们的聊天记录，喜欢和爱你都没有给我说过，我知道我不好看还有斑但是我真的喜欢你啊，太心酸了。'},
{id:6,word:'我可以再见你一面吗，我可以站远一点，不让你同事发现我。'},
{id:7,word:'你说别缠着你了并给我看了你女朋友的照片，啊~不愧是你！女朋友都这么漂亮~'},
{id:8,word:'今天你又来我们班看美女了，路过的时候瞥了一眼坐在第一排的我，我就知道你心里还是有我的。啊！真是美好的一天！'},
{id:9,word:'今天一个女孩子对我表白说喜欢我，可是我的心里只有你啊，我立马拒绝了她，她说她不会放弃的，我的心里只有你一个人啊，不会答应她的。'},
{id:10,word:'你知道吗？流星雨划过天空的时候，我许了一个你愿望成真的愿望。'},
{id:11,word:'听说你和你的女友分手了，我以为机会来了。没想到你又有了新的女友。'},
{id:12,word:'我发了条朋友圈，她去点赞了，我高兴的把她截屏并发给她，问他：你是不是有啥想对我说的？她下一秒把点赞取消，告诉我“你看我没点赞”。'},
{id:13,word:'多希望有一天你对我说：“宝，早安！”，而不是：“早，保安！”'}
],
keyword:'',
sortType:0
}
},
computed:{
newWords(){
let {keyword,words,sortType} = this;
let newArr = words.filter((item,index)=>{
return item.word.indexOf(keyword) != -1
})
if(sortType != 0){
newArr.sort((a,b) => {
if(sortType === 1){
return a.word.length - b.word.length;
}else{
return b.word.length - a.word.length;
}
})
}
return newArr
}
}
})
script>
body>
html>
