Vue实现选项卡tab切换制作

Aggie ·

更新时间:2024-11-13

· 1883 次阅读

本文实例为大家分享了Vue实现选项卡tab切换制作代码，供大家参考，具体内容如下

1.主要的实现功能如下:(点击进行切换,这里我不做太多的样式处理了,主要看功能)

2.话不多说:主要看代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项卡制作</title>
    <!--js文件记得用自己的-->
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
    <div id="xuanxiang" style="text-align: center;margin: 0 auto;width: 500px;">
        <div>
            <ul style="list-style-type: none" >
                <li style="float: left;
                           width: 130px;
                           display: block;
                           margin-top: 40px;
                           margin-right: 10px;
                           margin-bottom: 0px;
                           background-color: aquamarine;
                           line-height: 30px;
                           border-radius: 15px 15px 0 0;
                           color: blueviolet;
                           :hover{background-color: blueviolet;
                                    color: aliceblue;}"
                    v-for="(item,index) in arr" @click="changes(index)">{{ item.xuan }}</li>
            </ul>
        </div>
        <div style="text-align: center;margin: 0 auto;float: left;margin-top: 80px;background-color: antiquewhite;width: 500px;text-align: center;height: 100px;
                        margin-top: 0px;
                        vertical-align: middle;display: table-cell;">
            <p>{{ valuessss }}</p>
        </div>
    </div>
</body>
</html>

VUE tab

1024 个赞