Detailed explanation of Vuejs search matching function examples-JS Tutorial-php.cn

Detailed explanation of Vuejs search matching function examples

小云云

Release： 2018-02-26 11:11:13

Original

2869 people have browsed it

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:

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

<!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>

Copy after login

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!