[Vue基础实战]数据排序测试

参考代码:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Vue 数据排序测试</title>
  </head>
<body>
  <div id="app">
    <table class="recommend_table" cellspacing="0">
      <tr>
        <th>股票</th>
        <th @click="sort('in_price')">入选价</th>
        <th @click="sort('now_price')">最新价</th>
        <th @click="sort('increase')">模拟涨跌幅</th>
      </tr>
      <tr v-for="(item,index) in recommendlist" :key="index">
        <td>
          <div class="recommend_name">{{item.name}}</div>
          <div class="recommend_num">{{item.bn}}</div>
        </td>
        <td>{{item.in_price}}</td>
        <td>{{item.now_price}}</td>
        <td>{{item.increase}}%</td>
      </tr>
    </table>
  </div>
<script src="../js/vue.js"></script>
<script>
    var vm=new Vue({
     el:"#app",
     data:{
       recommendlist: [
        { name:'高科石化', bn:'002778', in_price: 20.68, now_price: 28.68, increase: 10.01},
        { name:'中孚信息', bn:'300659', in_price: 19.46, now_price: 17.46, increase: 9.06},
        { name:'永福股份', bn:'300712', in_price: 17.68, now_price: 32.68, increase: 2.01}
       ],
       sortType: 'in_price'
      },
     methods: {
      sort(type) {
       this.sortType = type;
       this.recommendlist.sort(this.compare(type));     
      },
      compare(attr){
       return function(a,b){
        var val1 = a[attr];
        var val2 = b[attr];
        return val2 - val1;
       }
      }
     }
    })
</script>
</body>
</html>

 

posted @ 2021-01-15 00:22  dshow  阅读(110)  评论(0)  编辑  收藏  举报