vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
本文实例为大家分享了vuejs实现搜索筛选、降序排序数据的具体代码，供大家参考，具体内容如下
先上输入前的样子：
<style>
#example{margin:100px auto;width:600px;}
.show{margin:10px;}
#searchText{display: block;margin:0 auto 10px;height:24px;line-height: 24px;width:200px;}
.content ul li{text-align: center;}
.content ul li span{display: inline-block;width:150px;font-size:15px;color:#000;}
</style>
</head>
<body>
<div id="example">
<input type="text" id="searchText" placeholder="搜索id或者姓名" v-model="searchData"/>
<div class="content">
<ul>
<li v-for="item in items | filterBy searchData in 'id' 'name' | orderBy 'name' '-1'">
<span>{{item.id}}</span>
<span>{{item.name}}</span>
<span>{{item.time}}</span>
</li>
</ul>
</div>
</div>
<script>
var example1 = new Vue({
el: '#example',
data: {
searchData:'',
items: [
{id:'1008',name:'涛涛',time:'20170207'},
{id:'1098',name:'合同',time:'20170213'},
{id:'1107',name:'晓丽',time:'20170304'},
{id:'1004',name:'小兰',time:'20170112'},
{id:'1102',name:'财务',time:'20170203'},
{id:'1108',name:'哈哈',time:'20170208'},
{id:'1345',name:'测试',time:'20170201'},
]
},
ready:function(){
},
watch:{
items:{
handler:function(val,oldval){
},
deep:true
}
},
methods:{
}
})
</script>
当在输入框中输入'合同'，得到结果如图:
关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。
更多vue学习教程请阅读专题《vue实战教程》
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
问题内容： 我有一个带有产品的mysql表。 这些产品具有类别ID和名称。 我想做的是按类别ID顺序降序排列，然后按产品名称升序排列。 我想要的是 不幸的是，这是行不通的。 甚至可以在mysql中定义第二个排序列的排序顺序吗？ 问题答案： 您可以通过以下方式进行操作： 看看优化
-
筛选数据 你可以通过 3 种方式筛选数据： 点击字段框中的向下箭头，然后选择“筛选”。 使用筛选窗格。 右击图表上的系列或数据点。 【提示】如果要清除筛选，则需要使用筛选窗格。 排序数据 你可以通过 2 种方式排序数据： 点击字段框中的向下箭头，然后选择“排序”。 使用排序窗格。
-
筛选数据 你可以通过 3 种方式筛选数据： 点击字段框中的向下箭头，然后选择“筛选”。 使用筛选窗格。 按住 Control 键并点按在图表的系列或数据点。 【提示】如果要清除筛选，则需要使用筛选窗格。 排序数据 你可以通过 2 种方式排序数据： 点击字段框中的向下箭头，然后选择“排序”。 使用排序窗格。
-
筛选数据 你可以通过 3 种方式筛选数据： 点击字段框中的向下箭头，然后选择“筛选”。 使用筛选窗格。 右击图表上的系列或数据点。 【提示】如果要清除筛选，则需要使用筛选窗格。 排序数据 你可以通过 2 种方式排序数据： 点击字段框中的向下箭头，然后选择“排序”。 使用排序窗格。
-
我想通过添加order by params来扩展这个规范。 我找不到解决办法如何实施这一点。你能给我一些建议吗？
-
我正在为一个数组做一个搜索函数。我有一个输入[文本]，例如，我把'ban'，然后我需要所有以'ban'开头的结果显示出来，例如香蕉，香蕉奶昔，香蕉（油炸），等等。 我该怎么做呢？我试过了，但每次都不准确。我试过的在下面。 我有一个非常接近，但当我键入“ban”时，它出现了“aardbei”。这显然是错误的。在这里，也许我忽略了什么？
-
Navicat 提供筛选功能，让你在连接窗格、对象列表窗格、模型设计器和其他树状结构搜索对象。 在连接窗格或其他树状结构，点击该窗格或树来聚焦并直接筛选字符串。如果连接窗格中的连接已打开，筛选也会同时应用到连接中的数据库对象。 在对象列表窗格，点击 Navicat 主窗口的 ，并在搜索框里输入筛选字符串。在模型设计窗口，简单地在搜索框里输入筛选字符串。 你可以移除筛选，只需删除筛选字符串。
-
“对象筛选”能让你在 Navicat Cloud 筛选模型，在视图设计器中筛选树状结构、以及在画布中筛选包含筛选字符串的表、实体或视图。 只需在“搜索”文本框中指定一个筛选字符串。若要移除筛选，只需删除筛选字符串。