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

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue的Ajax、数组、动画等技术综合测试-A</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">
  <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
    },
    methods: {
      del(id){
        var index=this.list.findIndex(item=>{
          if(item.PlayerSID==id){
            return true;
          }
        });
        this.list.splice(index,1);
      }
    },
  mounted() {
    const 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-13 15:54  dshow  阅读(66)  评论(0)  编辑  收藏  举报