[Vue基础实战]Vue的Ajax、数组、动画等技术综合测试-B

参考代码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Vue的Ajax、数组、动画等技术综合测试-B</title>
    <style>
      .v-enter,
      .v-leave-to {
        opacity: 0;
        transform: translateY(80px);
      }

      .v-enter-active,
      .v-leave-active {
        transition: all 0.6s ease;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <input type="button" value="按照ID" @click="ZdySIDSort()" />
      <input type="button" value="按照Name" @click="ZdyNameSort()" />
      <transition-group appear tag="ul">
        <li v-for="i,index in list"  :key="i.PlayerSID"  @click="del(i.PlayerSID)">
          {{index}}-{{i.PlayerSID}}-{{i.PlayerName}}
        </li>
      </transition-group>
    </div>
    <script src="../js/vue.js"></script>
    <script src="../js/axios.js"></script>
    <script>
      new Vue({
        el: "#app",
        data: {
          list: null,
          sortoption: true,
        },
        methods: {
          ZdySIDSort() {
            if (this.sortoption == true) {
              this.list.sort((a, b) => a.PlayerSID - b.PlayerSID);
            } else {
              this.list.sort((a, b) => b.PlayerSID - a.PlayerSID);
            }
            this.sortoption = !this.sortoption;
          },
          ZdyNameSort() {
            this.list.sort((c, d) => {
              if (this.sortoption == true) {
                var x = c.PlayerName;
                var y = d.PlayerName;
                return x < y ? -1 : x > y ? 1 : 0;
              } else {
                var y = c.PlayerName;
                var x = d.PlayerName;
                return x < y ? -1 : x > y ? 1 : 0;
              }
            });
            this.sortoption = !this.sortoption;
          },
          del(id) {
            var index = this.list.findIndex((item) => {
              if (item.PlayerSID == id) {
                return true;
              }
            });
            this.list.splice(index, 1);
          },
        },
        mounted() {
          let self = this;
          axios.get("http://www.dshow.net:8038/api/rankdshow/11")
            .then(function (response) {
              self.list = response.data;
            })
            .catch(function (error) {
              // 请求失败处理
              console.log(error);
            });
        },
      });
    </script>
  </body>
</html>

 

posted @ 2021-01-15 08:48  dshow  阅读(75)  评论(0)  编辑  收藏  举报