Vue案例：switch开关和选项卡_vue a-switch-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_54089303/article/details/121686799

1.switch开关案例

改开关案例由两个div构成，通过vue进行类的添加和删除来改变背景颜色和平移达到效果。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .con2{
            width: 60px;
            height: 20px;
            border-radius: 15px;
            background-color: red;
            padding: 2px;
            transition: all 1s;
        }
        .con2 div{
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: white;
            transition: all 1s;
        }
        .con{
            background-color: green;
        }
        .con div{
            margin-left: 39px;
        }

    </style>
</head>
<body>
    <div id="app">
        <div :class="{con:flag,con2:true}"  @click="f1">
            <div></div>
        </div>

    </div>
    
</body>
<script src="../vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            flag:false


        },
        methods:{
            f1:function(){
                this.flag=!this.flag
            }

        },

    })

</script>
</html>

2.选项卡案例

该选项卡使用vue中data的两个数组对内容进行添加，通过索引值进行相互匹配，代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .tabs{
            width: 300px;
            margin: 20px auto;
        }
        .titles{
            display: flex;
            justify-content: start;
            border-bottom: 1px solid #ccc;
        }
        .titles .title{
            padding: 5px 20px;
            height: 30px;
            line-height: 30px;
            cursor: pointer;
        }
        .titles .active{
            background-color: blue;
            color: #fff;
        }
        .contents .active{
            display: block;
        }
        .contents{
            border: 1px solid #ccc;
            padding: 10px;
            border-top: none;
        }
        .contents div{
            display: none;
        }


    </style>
</head>
<body>
    <div id="app">
        <div class="tabs">
            <div class="titles">
                <div :class="{title:true,active:i==index}" v-for="(t,i) in tabs.titles" :key="i" @click="myClick(i)">
                    {{t}}
                </div>
            </div>
            <div class="contents">
                <div :class="{con:true,active:i==index}" v-for="(c,i) in tabs.contents" :key="i">
                    {{c}}
                </div>
            </div>
        </div>
    </div>
    
</body>
<script src="../vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            index:0,
            tabs:{
                titles:["亚瑟","程咬金","妲己"],
                contents:['人在塔在',"来，我们打一架","羁绊是什么"]
            }

        },
        methods:{
            myClick(a){
                //
                this.index = a

            }


        },

    })

</script>
</html>