vue点击按钮给商品按照价格进行倒叙
程序员文章站
2022-05-17 16:39:59
按照商品价格倒叙 点击倒叙 {{list.name}} ------------ {{list.gdPrice}} ......
<!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>
上一篇： python_面向对象编程