表格排序
範例：https://codepen.io/NishanYeah/pen/YjNPgx
箭頭的的icon
- 貼入fontawesome css
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" crossorigin="anonymous">
- 複製箭頭icon的標籤放到span當中
<span >
<i class="fas fa-angle-up"></i>
</span>
- 製作reverse的class，讓icon可以倒轉180deg
.reverse {
transform: rotate(180deg)
}
用:class切換reverse的數值
<span class="icon" :class="{'reverse':iconreverse_left}">
<i class="fas fa-angle-up"></i>
</span>
sort排序的原理
- 預設是根據ASCII編碼排序A->Z or 1->9
data.sort(sortgogo) //如果得到正值就從小排到大，負值就大牌到小
sortgogo = function(a,b){
return a-b
}
數據排序
var app = new Vue({
el: "#app ",
data: {
menu: [{
name: "川菜",
price: 200,
discount: 3
},
{
name: "漢堡",
price: 70,
discount: 5
},
{
name: "冰咖啡",
price: 40,
discount: 10
}, {
name: "奶茶",
price: 100,
discount: 10
}, {
name: "稀飯",
price: 900,
discount: 100
}, {
name: "大奶包",
price: 20,
discount: 10
},
],
iconreverse_right: false,
iconreverse_left: false,
pricepriorty: true,
priceup: true,
discountup: true
},
computed: {
newarray: function () {
var vm = this;
pricesort = function (a, b) {
if (vm.priceup) {
return a.price - b.price
} else return b.price - a.price
}
discountsort = function (a, b) {
if (vm.discountup) {
return a.discount - b.discount
} else return b.discount - a.discount
}
if (vm.pricepriorty) {
return vm.menu.sort(pricesort)
} else return vm.menu.sort(discountsort)
}
}
})
三元運算符和[]寫法
<body>
<div id="app">
<div class="container mt-5">
<table class="table table-striped">
<thead class="thead-dark">
<th>商品
</th>
<th class="click" @click="iconreverse_left=!iconreverse_left,priority='price',ASC=-1*ASC">價格
<span class="icon" :class="{'reverse':iconreverse_left}">
<i class="fas fa-angle-up"></i>
</span>
</th>
<th class="click" @click="iconreverse_right=!iconreverse_right,priority='discount',ASC=-1*ASC"> 折扣
<span class="icon" :class="{'reverse':iconreverse_right}">
<i class="fas fa-angle-up"></i>
</span>
</th>
</thead>
<tbody>
<tr v-for="item in newarray">
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>{{item.discount}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
<script>
var app = new Vue({
el: "#app ",
data: {
menu: [{
name: "川菜",
price: 200,
discount: 3
}, {
name: "漢堡",
price: 70,
discount: 5
}, {
name: "冰咖啡",
price: 40,
discount: 10
}, {
name: "奶茶",
price: 100,
discount: 10
}, {
name: "稀飯",
price: 900,
discount: 100
}, {
name: "大西瓜",
price: 20,
discount: 10
}, ],
iconreverse_right: false,
iconreverse_left: false,
priority: 'price',
ASC: 1,
},
computed: {
newarray: function () {
var vm = this;
return vm.menu.sort(function (a, b) {
var a = a.[vm.priority]
var b = b.[vm.priority]
return (a === b ? 0 : a > b ? vm.ASC * 1 : vm.ASC * -1)
});
}
}
})
請問如果一開始不想要先排序
回覆刪除應該要加什麼條件呢