选项卡及删除按钮

最新推荐文章于 2021-12-21 16:18:21 发布

吴机智

最新推荐文章于 2021-12-21 16:18:21 发布

阅读量165

点赞数

分类专栏： vue 案例

本文链接：https://blog.csdn.net/m0_49893750/article/details/109495141

版权

案例同时被 2 个专栏收录

45 篇文章 0 订阅

订阅专栏

vue

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./js/vue.js"></script>
    <style>
      ul{
        border:1px solid;
        width: 300px;
        display: flex;
        justify-content: space-around;
      }
      .active{
        background-color: pink;
      }
    </style>
</head>

<body>
     <div id="main">
        <ul>
          <li :class="{'active':tab=='one'}" @click="change('one')">选项一</li>
          <li :class="{'active':tab=='two'}" @click="change('two')">选项二</li>
          <li :class="{'active':tab=='three'}" @click="change('three')">选项三</li>
        </ul>
        <div v-show="tab=='one'">选项一</div>
        <div  v-show="tab=='two'">选项二</div>
        <div  v-show="tab=='three'">选项三</div>
     <hr/>
     <ol>
       <li v-for="(item,index) in arr" :key="item.id">
         {{item.tit}}  <button @click='del(index)'>删除</button>
       </li>
     </ol>
      </div>
</body>
<script>
  const app=new Vue({
      el:"#main",
      data:{
        num:9,
        tab:"one",
        arr:[
          {id:1,tit:"aaa"},
          {id:2,tit:"bbb"},
          {id:3,tit:"cccc"},
          {id:4,tit:"ddd"},
        ]
      },
      methods:{  //定义方法
        change(v){
          this.tab=v
        },
        del(index){
          this.arr.splice(index,1)
        }

      }
     
  })
</script>
</html>