vue 時間日期的升降序

話不多說直接上圖
第一步：表頭字段加升降序圖標

<thead>
 <tr>
    <th>
     <div>
        <span>預警時間
            <i class="fa fa-angle-down" v-show="isShowA==false" @click="ShowA"></i>
            <i class="fa fa-angle-up" v-show="isShowA!=false" @click="ShowA1"></i>
         </span>
       </div>
      </th>
   </tr>
  </thead>

效果如圖

                 <tbody class="data-tbody" id="tbody">
                     //升序列表
                      <tr v-for="(item,index) in range" v-if="togglelist==false">
                        <td>{{item.CaseNum}}</td> <!-- 發病人數 -->
                        <td>{{item.WarningDate}}</td>     <!--預警時間  -->
                      </tr>
                      //降序列表
                       <tr v-for="(item,index) in range" v-if="togglelist==false">
                        <td>{{item.CaseNum}}</td> <!-- 發病人數 -->
                        <td>{{item.WarningDate}}</td>     <!--預警時間  -->
                      </tr>
                   </tbody>

第二步：點擊升序或降序!
效果如下：降序升序

具體實現方法：
思路：後臺返回的數據定義爲list，我們需要把list數據在點擊升序時利用computed方法把list計算統計爲range，（降序：range1）,也就是tbody裏面的range,range1。

computed: {
      //降序
      range: function() {
          return this.list.slice().sort((a, b) => new Date(a.WarningDate).getTime() - new Date(b.WarningDate).getTime()).reverse(); //結    合reverse(),成功實現降序排列
      },
      //升序
      range1: function() {     
          return this.list.slice().sort((a, b) => new Date(a.WarningDate).getTime() - new Date(b.WarningDate).getTime()); //結合reverse(),成功實現降序排列
      },
      }

上面爲升降序統計的方法，list爲原有數據，range爲降序後的數據，range1爲升序後的數據。
接下來說一下點擊升序或降序時的方法

 methods: {
 //降序；
     ShowA() {
        this.type = 1;
        this.isShowA = true;
        this.togglelist = true;
      },
      //升序
      ShowA1() {
        this.type = 1;
        this.isShowA = false;
        this.togglelist = false;
      },
}