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;
      },
}