1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

// <-----html----->
#app
  table.table
    thead
      tr
        th 品名
        th.click(@click="sortPrice") 價格  //2.
          span(:class="{'rotate':b}")  //8.
            i.fas.fa-angle-up.text-success
        th.click(@click="sortDate") 到期日  //5.
          span(:class="{'rotate':c}")  //9.
            i.fas.fa-angle-up.text-success
      tr(v-for="item in a")  //1.
        td {{ item.name }}
        td {{ item.price }}
        td {{ item.expiryDate }}

// <-----css----->
.click
  cursor: pointer
  
span
  display: inline-block
  
.rotate
  transform: rotate(180deg)

// <-----js----->
let app = new Vue({
  el: '#app',
  data:{
    a: [
      {
        name: '巧呼呼蘇打水',
        price: 30,
        expiryDate: 90
      },
      {
        name: '心驚膽跳羊肉飯',
        price: 65,
        expiryDate: 2
      },
      {
        name: '郭師傅武功麵包',
        price: 32,
        expiryDate: 1
      },
      {
        name: '不太會過期的新鮮牛奶',
        price: 75,
        expiryDate: 600
      },
      {
        name: '金殺 巧粒粒',
        price: 120,
        expiryDate: 200
      }
    ],
    b: true,
    c: true
  },
  methods:{
    sortPrice: function(){  //2.
      if(this.b == true){  //3.
        this.a.sort((x,y)=> x.price - y.price);
        this.b = false;  //4.
      }else if(this.b == false){
        this.a.sort((x,y)=> y.price - x.price);
        this.b = true;
      }
    },
    sortDate: function(){  //5.
      if(this.c == true){  //6.
        this.a.sort((x,y)=> x.expiryDate - y.expiryDate);
        this.c = false;  //7.
      }else if(this.c == false){
        this.a.sort((x,y)=> y.expiryDate - x.expiryDate);
        this.c = true;
      }
    },
  }
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

// <-----html----->
#app
  table.table
    thead
      tr
        th 品名
        th.click(@click=" b = true ; c = !c ") 價格  //6.
          span(:class="{ 'rotate': b && c }")  //8.
            i.fas.fa-angle-up.text-success
        th.click(@click=" b = false ; c = !c ") 到期日  //7.
          span(:class="{ 'rotate': !b && c }")  //8.
            i.fas.fa-angle-up.text-success
      tr(v-for="item in sortArray")  //1.
        td {{ item.name }}
        td {{ item.price }}
        td {{ item.expiryDate }}

// <-----css----->
.click
  cursor: pointer
  
span
  display: inline-block
  
.rotate
  transform: rotate(180deg)

// <-----js----->
let app = new Vue({
  el: '#app',
  data:{
    a: [
      {
        name: '巧呼呼蘇打水',
        price: 30,
        expiryDate: 90
      },
      {
        name: '心驚膽跳羊肉飯',
        price: 65,
        expiryDate: 2
      },
      {
        name: '郭師傅武功麵包',
        price: 32,
        expiryDate: 1
      },
      {
        name: '不太會過期的新鮮牛奶',
        price: 75,
        expiryDate: 600
      },
      {
        name: '金殺 巧粒粒',
        price: 120,
        expiryDate: 200
      }
    ],
    b: true,
    c: true
  },
  computed:{
    sortArray: function(){  //2.
      if(this.b == true){  //3.
        return this.a.sort((x,y)=>{  //5.
          if(this.c == true){  //4.
            return x.price - y.price;  //5.
          }else if(this.c == false){  //4.
            return y.price - x.price;  //5.
          }
        });
      }else if(this.b == false){  //3.
        return this.a.sort((x,y)=>{  //5.
          if(this.c == true){  //4.
            return x.expiryDate - y.expiryDate;  //5.
          }else if(this.c == false){  //4.
            return y.expiryDate - x.expiryDate;  //5.
          }
        })
      }
    }
  }
});