<body>
<div id="app">
<div v-for="(attract,key) in person">
{{key}}----{{attract}}
</div>
<div><input type="text" v-model="searchInput"></div>
<div>
<button @click="paixu(1)">升序</button>
<button @click="paixu(2)">降序</button>
<button @click="paixu(0)">原顺序</button>
</div>
<div v-for="(item,index) in searchList">
{{item.name}}----{{item.price}}
</div>
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
var app=new Vue({
el:"#app",
data(){
return{
keyword:0,//控制排序的
searchInput:"",
goodsList:[
{name:"牛仔裤",price:40},
{name:"运动裤",price:80},
{name:"直筒裤",price:30},
{name:"西裤",price:150},
{name:"运动鞋",price:120},
{name:"小白鞋",price:30},
{name:"皮鞋",price:130},
{name:"黄金短裤",price:10000}
],
person:{
name:"导导",
seg:"男"
}
}
},
methods:{
paixu(val){
this.keyword=val
}
},
computed:{
//把goodsList的内容过滤,把符号条件的形成新的数组
//filter时数组的过滤方法,这个方法的参数是一个函数,此函数返回true,则把此行返回新的数组中
searchList(){
let list=this.goodsList.filter((item)=>{
return item.name.indexOf(this.searchInput)!==-1
})
if (this.keyword) {
list.sort((a1,a2)=>{
return this.keyword===1
? a1.price - a2.price
: a2.price - a1.price;
})
}
return list
}
}
})
</script>
