vue实现一个简单的选项卡

时间：2021-05-31 06:25:23

用vue来实现一个小的选项卡切换，比之前要简单、方便很多。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/vue.min.js"></script>
    <style>
    button{
        width:40px;
        height:30px;
        text-align:center;
        border:none;
        cursor: pointer;
    }
    .active{
        background:red;
        color:#fff;
        border:none;
    }
    </style>
</head>
<body>
    <div id="app">
        <button 
         v-for="(val,key) in box"
        @click="changes(key)"
        :class="{active:key == num}"
         >{{key+1}}</button>
        <div
            v-for="(val,key) in box"
            v-show="key==num"
        >{{val}}</div>
    </div>
    <script>
    /*
    运用知识点：
        v-for
        v-on,简写@
        v-bind简写:
        v-show
    思路：
        循环数据，当点击时候，把key传到changes方法中，然后num赋值给active
        循环数组，只要box中key等于num就让它显示出来
    */
   new Vue({
       el:'#app',
       data:{
          box:['俄克拉荷马','萨克拉门托','明尼苏达'],
          num:0
       },
       methods:{
           changes(key){
               this.num = key;
           }
       }
   });
    </script>
</body>
</html>

 

标签：

相关文章