vue 设置列表项上移、下移、删除操作

最新推荐文章于 2024-05-28 14:53:32 发布

羽筠

最新推荐文章于 2024-05-28 14:53:32 发布

阅读量1.3k

点赞数

分类专栏： vue.js 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_16494241/article/details/128097378

版权

vue.js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

vue 设置列表项上移、下移、删除操作

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>上移/下移/删除 test</title>
<style type="text/css">
  ul{width: 400px; margin: 0 auto;}
  li{display: flex; justify-content: space-between; align-items: center;}
  .menu-box{display: flex; justify-content: flex-end; align-items: center;}
  .menu-btn{ width: 66px; text-align: center; cursor: pointer;}
</style>
</head>
<body>
  
  <div id="app">
    <ul>
      <li v-for="item,index in list">
        <div>{{item}}</div>
        <div class="menu-box">
          <span class="menu-btn">
            <i @click="moveTo('up',index)" v-if="index > 0">上移 ↑</i>
          </span>
          <span class="menu-btn">
            <i @click="moveTo('down',index)" v-if="index < list.length - 1">下移 ↓</i>
          </span>
          <span class="menu-btn">
            <i @click="deleteDo(index)">删除 ✗</i>
          </span>
        </div>
      </li>
    </ul>
  </div>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.6/vue.min.js"></script>
  <script type="text/javascript">
    var VM = new Vue({
      el:"#app",
      data:{
        list:['列表111','列表222','列表333','列表444',]
      },
      created() { },
      mounted() { },
      watch:{ },
      methods:{
        // 上移/下移
        moveTo(flag,index){
          let toIndex;
          if(flag == 'up'){
            if(index == 0){
              alert('已经在最前面啦'); return;
            }
            toIndex = index - 1;
          }
          if(flag == 'down'){
            if(index == this.list.length - 1){
              alert('已经在最后面啦'); return;
            }
            toIndex = index + 1;
          }
          // let currItem = this.list.slice(index,index+1);
          // this.list.splice(index,1);
          let currItem = this.list.splice(index,1);
          this.list.splice(toIndex,0,...currItem);
        },
        // 删除
        deleteDo(index){
          if(this.list.length == 1){
            alert('最少保留一项'); return;
          }
          this.list.splice(index,1);
        },
      },
    })
  </script>
  
</body>
</html>