Home >Web Front-end >JS Tutorial >Detailed explanation of Vuejs search matching function examples

Detailed explanation of Vuejs search matching function examples

小云云Original: 2018-02-26 11:11:132788browse

This article mainly shares with you Vuejs search matching function examples. I have been looking at vue recently, checked a lot of information, read a lot of documents and blogs, and probably have only a half-knowledge. Then I used the knowledge I understood to write a simple Search matching function.

Probably looks like this:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue测试2</title>
<script type="text/javascript" src="js/vue.min.js"></script>
<style type="text/css">
*{
padding: 0;
margin: 0;
font-size: 14px;
font-family: "微软雅黑";
}
#box{
width: 500px;
height: auto;
border: 1px solid #ccc;
margin: 50px auto;
padding: 10px;
}
.search{
width: 480px;
height: 100px;
text-align: center;
}
.searchBox{
width: 230px;
height: 40px;
outline: none;
text-indent: 10px;
margin-right: 20px;
}
.btn{
width: 100px;
height: 50px;
cursor: pointer;
font-size: 18px;
}
.goodsheet{
width: 500px;
height: auto;
border: 1px solid #eee;
}
.goodsheet tr td,
            .goodsheet tr th{
width: 33%;
border: 1px solid #eee;
padding: 5px 10px;
text-align: left;
}
.goodsheet tr th span{
background: #ff9900;
padding: 0 6px;
color: #fff;
cursor: pointer;
}
</style>
</head>
<body>
<p id="box">
<p class="search">
<input type="text" class="searchBox" v-model="searchVal">
<button class="btn">搜 索</button>
</p>
<table class="goodsheet">
<tr>
<th>商品名</th>
<th>单价
<span @click="orderFn(&#39;price&#39;, false)">↑</span>
<span @click="orderFn(&#39;price&#39;, true)">↓</span>
</th>
<th>销量
<span @click="orderFn(&#39;sales&#39;, false)">↑</span>
<span @click="orderFn(&#39;sales&#39;, true)">↓</span>
</th>
</tr>
<tr v-for=&#39;(item, key) in list&#39;>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>{{item.sales}}万</td>
</tr>
</table>
</p>
<script type="text/javascript">
var myVueTest = new Vue({
el:&#39;#box&#39;,
data:{
goodsList:[
//假数据
{name:"三星Galaxy Note8",price:5200,sales:2.6},
{name:"iphone5s",price:2500,sales:2.2},
{name:"iphone6",price:2800,sales:1.6},
{name:"iphone6s",price:3200,sales:2.9},
{name:"iphone7",price:3800,sales:12.6},
{name:"iphone7plus",price:4200,sales:2.1},
{name:"iphone8",price:5500,sales:10.6},
{name:"华为",price:4600,sales:7.6},
{name:"小米",price:1200,sales:32.6},
{name:"OPPOR11",price:3000,sales:1.2},
{name:"vivoX20",price:3250,sales:2.9}
],
searchVal:&#39;&#39;,    //默认输入为空
letter:&#39;&#39;,       //默认不排序
original:false   //默认从小到大排列
},
methods:{
orderFn(letter,original){
this.letter = letter;       //排序字段 price or sales 
this.original = original;   //排序方式  up or down
}
},
//通过计算属性过滤数据
computed:{
list: function(){
var _this = this;
//逻辑-->根据input的value值筛选goodsList中的数据
var arrByZM = [];//声明一个空数组来存放数据
for (var i=0;i<this.goodsList.length;i++){
//for循环数据中的每一项（根据name值）
if(this.goodsList[i].name.search(this.searchVal) != -1){
//判断输入框中的值是否可以匹配到数据，如果匹配成功
arrByZM.push(this.goodsList[i]);
//向空数组中添加数据
}
}
//逻辑-->升序降序排列  false: 默认从小到大  true：默认从大到小
//判断，如果要letter不为空，说明要进行排序
if(this.letter != &#39;&#39;){
arrByZM.sort(function( a , b){
if(_this.original){
return b[_this.letter] - a[_this.letter];
}else{
return a[_this.letter] - b[_this.letter];
}
});
}
//一定要记得返回筛选后的数据
return arrByZM;
}
}
});
</script>
</body>
</html>

Related recommendations:

php ajax real input automatic search matching program code_PHP tutorial

The above is the detailed content of Detailed explanation of Vuejs search matching function examples. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed analysis of Generator functionNext article：Detailed analysis of Generator function

See more

Detailed explanation of Vuejs search matching function examples

Related articles