vue选项卡

瑶骨

已于 2023-01-19 14:56:19 修改

阅读量139

点赞数

文章标签： vue.js 前端 Powered by 金山文档

于 2023-01-10 18:02:11 首次发布

本文链接：https://blog.csdn.net/qq_47243637/article/details/128634202

版权

<!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>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .tab {
            width: 800px;
            height: 40px;
            margin: 10px auto;
        }

        .tab li {
            text-align: center;
            width: 200px;
            line-height: 40px;
            display: inline-block;
        }

        .box {
            width: 800px;
            height: 750px;
            margin: auto;
        }

        .box li {
            width: 800px;
            height: 750px;
            display: none;
        }

        .box li img {
            width: 100%;
            height: 100%;
        }

        .active{
            background-color: pink;
        }

        .tive{
            display: block !important;
        }
    </style>
</head>

<body>
    <div id='myApp'>
        <ul class="tab">
            <li v-for="(time,index) in arr" :key="time.id" :class="[i == index ? 'active' : '' ]" @click="change(index)">{{time.TabControl}}</li>
        </ul>

        <ul class="box">
            <li v-for="(time,index) in arr" :key="time.id" :class="[i == index ? 'tive' : '' ]">
                <img :src="time.url" alt="">
            </li>
        </ul>
    </div>
</body>
<script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
<script>
    new Vue({
        el: '#myApp',
        data: {
            i: 0,
            arr: [
                { id: 1, TabControl: '第一个选项', url: 'https://uploadfile.bizhizu.cn/up/ef/df/dd/efdfddb79435265b24aad6714d952724.jpg' },
                { id: 2, TabControl: '第二个选项', url: 'https://www.succedu.com/d/file/2020/07/25/a1c0ca9e51.jpg' },
                { id: 3, TabControl: '第三个选项', url: 'https://img.zmtc.com/2019/0806/20190806060940425.jpg' },
                { id: 4, TabControl: '第四个选项', url: 'https://www.mlito.com/wp-content/uploads/2018/03/bf478dbc95.jpg' }
            ]
        },
        methods: {
            change(index){ // 接收索引值
                this.i = index // 把索引值赋值给i
            }
        },
    })
</script>

</html>