此次的编写代码可以直接使用
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>
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>
效果展示：
此文章没太多讲解，我相信各位大佬都是能看懂的
