- <!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>
来源: http://www.bubuko.com/infodetail-2934556.html