<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
<style>
th,td{border: 1px solid black;}
</style>
</head>
<body>
<div id="app">
<input type="text" v-model="msg"/>
<button @click="type = 0">原序</button>
<button @click="type = 1">升序</button>
<button @click="type = 2">降序</button>
<table>
<tr>
<th>序号</th>
<th>英雄</th>
<th>能量值</th>
<th>选择</th>
</tr>
<!-- 这里遍历新数组 -->
<tr v-for="(hero,index) in newH" :key="hero.id">
<td>{{index}}</td>
<td>{{hero.name}}</td>
<td>{{hero.power}}</td>
<td><input type="checkbox"/></td>
</tr>
</table>
<button @click="addHero()">按一下</button>
</div>
<script>
const vm = new Vue({
el : "#app",
data : {
type : 0,
msg : "",
heros : [
{id:"101",name:"Jerry",power:10000},
{id:"102",name:"Tom",power:9000},
{id:"103",name:"Jack",power:8000},
{id:"104",name:"Rose",power:6000}
]
},
methods : {
addHero()
{
this.heros.unshift({id:"1000",name:"Top",power:4000});
}
},
computed : {
newH(){
//执行过滤
const arr = this.heros.filter((hero) => {
return hero.name.indexOf(this.msg.toLowerCase()) >= 0 || hero.name.indexOf(this.msg.toUpperCase()) >= 0;
});
//排序
// 升序
if(this.type === 1)
{
arr.sort((a,b) => {
return a.power - b.power;
});
}
// 降序
else if(this.type === 1)
{
arr.sort((a,b) => {
return b.power - a.power;
});
}
//返回
return arr;
}
}
});
let arr = [6,7,8,9,10,0,1,2,3,4,5];
arr.sort((a,b) => {
// sort和filter不一样,sort不会生成一个新的数组,而是在原基础上修改
// 会导致原数组被修改
// a-b是升序
return a - b;
// b-a是降序
});
console.log(arr);
</script>
</body>
</html>
VUE框架使用计算属性实现列表排序效果实现------VUE框架
原创
©著作权归作者所有:来自51CTO博客作者旧约Alatus的原创作品,请联系作者获取转载授权,否则将追究法律责任
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
VUE框架实现JS实现效果传值------VUE框架
VUE框架实现JS实现效果传值------VUE框架
Vue html List -
VUE教程04 动画效果实现
文章目录单元素动画效果多元素动画效果通过JS钩子实现动画配合Velocity实现过渡动画自定义样式动画配合Animate实现过渡动画transition-group单元
VUE 动画 transition transitiongroup 过渡动画 -
【VUE项目实战】24、分页效果实现
接上篇《23、改造状态列的显示效果》上一篇我们实现了状态列的显示
vue.js elementui el-pagination size-change current-change