Tabla de contenido
El código escrito esta vez se puede utilizar directamente.
Código HTML:
<body>
<div id="app">
<div v-for="(value,key) in person">
{
{key}}--{
{value}}
</div>
<div>商品名：<input type="text" v-model="shuruInput"></div>
<div v-for="(item,index) in newShangpin">
{
{item.name}}--{
{item.price}}
</div>
<div>
<button @click="keyword=1">升序</button>
<button @click="keyword=2">降序</button>
<button @click="keyword=0">原顺序</button>
</div>
</div>
</body>código js:
<script src="../js/vue2.7.js"></script><!--根据自己vue文件的地址输入-->
<script>
var app = new Vue({
el: '#app',
data() {
return {
shuruInput:'',
shangpin:[
{name:"牛仔裤",price:200},
{name:"运动裤",price:300},
{name:"运动鞋",price:100},
{name:"篮球鞋",price:400},
],
keyword:0
}
},
computed:{
newShangpin(){
let list=this.shangpin.filter((item)=>{
return item.name.indexOf(this.shuruInput)!==-1;
})
//排序不等于0执行
if(this.keyword){
list.sort((a1,a2)=>{
return this.keyword===1
? a1.price-a2.price
: a2.price-a1.price
})
}
return list;
},
},
});
</script>Mostrar resultados:
No hay mucha explicación en este artículo, creo que todos pueden entenderlo.