cssjshtml vue.js v-for 过滤并排序
vue.js computed 利用逗号实现 vue.js 先排序再过滤，关键点在于:顺序不能为先过滤再排序。
<!--
# @Time : 2018/10/18 上午12:03
# @Author : BrownWang
# @Email : 277215243@qq.com
# @File : vue6.html
# @Software: PyCharm -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#app {
color: #99ff22;
}
</style>
</head>
<body>
<div id="app">
<h3> 原始数据 </h3>
<ul>
<template v-for="student in students">
<li>学校:{{ student.school }}</li>
<li>班级:{{ student.class }}</li>
<li>姓名:{{ student.name }}</li>
</template>
</ul>
<h3> vue.js 过滤并排序后的数据 </h3>
<ul>
<template v-for="student in sortedClasses,filterStudents">
<li>学校:{{ student.school }}</li>
<li>班级:{{ student.class }}</li>
<li>姓名:{{ student.name }}</li>
</template>
</ul>
</div>
<script src="/static/js/vue.min.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
students: [
{
name: '王梓',
school: '培华学院',
class: '4a061'
},
{
name: '墩墩',
school: '技术学院',
class: '2a0401'
},
{
name: 'iqos',
school: '千叶中学',
class: '3a0341'
},
{
name: 'macs',
school: '英才学院',
class: '3a03as02'
}
]
},
computed: {
filterStudents: function () {
return this.students.filter(function (student) {
return student.school.match(/学院/);
})
},
sortedClasses: function () {
return this.students.sort(function (a, b) {
//class由长到短进行排序
return a.class.length < b.class.length;
})
}
}
})
</script>
</body>
</html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018/10/18 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读