下面是通过点击事件,切换当前选中的是第几个标签

1.1 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>一个样式切换的小案例</title>
    <style>
        .box{
            width: 200px;
            height: 30px;
            background: #ccc;
            margin-bottom: 10px;
        }
        .box.active{
            background: orange;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 绑定的时候active要的就是true或false -->
        <div class="box" :class="{active:num==index?true:false}" v-for="(item,index) in listArr" @click="clickBox(index)">
            {{item+'->'+index}}
        </div>
        <h1>{{num}}</h1>
    </div>

    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                listArr:[
                    "UI设计",
                    "小程序开发",
                    "Web前端",
                    "java开发"
                ],
                num: 0
            },
            methods: {
                clickBox(e){
                    // console.log(e);
                    this.num = e
                }
            }
        });
    </script>
</body>
</html>

1.2 显示效果

1.3 在线演示

点击下面链接,即可在线运行

http://www.68yun.top/demo/vue/2.0.html

最后修改:2021 年 02 月 20 日 10 : 29 AM