如何使用Vue写一个简单的选项卡功能

最新推荐文章于 2022-09-19 20:37:00 发布

aysfbctcu511961230

最新推荐文章于 2022-09-19 20:37:00 发布

阅读量154

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/r-mp/p/11224145.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    
        .btnAtive{
            background: red;
            color: #fff;
        }
        .container{
            width:200px;
            height: 200px;
            overflow: hidden;
            background: #ccc;
        }

        .container>div{
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div id="app">
        <button v-for="(item,index) in btns"
            :class="activeIndex == index?'btnAtive':''"
            @click="handleToggle(index)"
        >{{item}}</button>
        <div class="container">
            <div v-for="(item,index) in contents" v-show="activeIndex == index">{{item}}</div>
        </div>
    </div>
</body>
</html>
<script src="./vue.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            btns:["按钮一","按钮二","按钮三"],
            contents:[
                "内容一",
                "内容二",
                "内容三"
            ],
            activeIndex:0
        },
        methods:{
            handleToggle(index){
                this.activeIndex = index;
            }
        }
    })
</script>

转载于:https://www.cnblogs.com/r-mp/p/11224145.html

aysfbctcu511961230

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
如何使用Vue写一个简单的选项卡功能

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta htt...
复制链接

扫一扫