vue点击按钮给商品按照价格进行倒叙
Posted cengjingdeshuige
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue点击按钮给商品按照价格进行倒叙相关的知识,希望对你有一定的参考价值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>按照商品价格倒叙</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <button @click="sortBtn()">点击倒叙</button> <ul> <li v-for="(list, index) in goodList" :key="index">{{list.name}} ------------ {{list.gdPrice}}</li> </ul> </div> <script> var app = new Vue({ el: ‘#app‘, data() { return { goodList: [ { name: ‘测试商品1‘, gdPrice: 600 }, { name: ‘测试商品2‘, gdPrice: 700 }, { name: ‘测试商品3‘, gdPrice: 800 } ] } }, methods: { sortBtn () { console.log(‘sort‘) this.goodList.sort(this.sortMethods(‘gdPrice‘)) }, sortMethods (property) { return function(a,b){ var value1 = a[property] var value2 = b[property] return value2 - value1 } } }, }) </script> </body> </html>
以上是关于vue点击按钮给商品按照价格进行倒叙的主要内容,如果未能解决你的问题,请参考以下文章
Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城(SSM前后端分离项目)十六(商品排序,Thymeleaf快速入门,商品详情页的展示)