vue 选项卡

最新推荐文章于 2023-09-25 18:09:05 发布

原创最新推荐文章于 2023-09-25 18:09:05 发布 · 134 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #html5

本文介绍了一个使用Vue.js实现的简单选项卡切换效果的示例。通过按钮点击切换不同的内容面板，展示了Vue的数据绑定和事件处理特性。

选项卡切换的小demo

在这里插入图片描述

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <style>
        </style>
    </head>
    <body>
        <div id="app">
            <button 
                v-for="(i,index) in list_btn" :key='index'
                @click="handleActive(index)" 
            >
                {{ i }}
            </button>

            <ul style="border:1px solid #ccc;">
                <li v-show="num == index" v-for="(item,index) in list" :key="index">
                    <h2>{{item.title}}</h2>
                    <span>{{item.content}}</span> 
                </li>
            </ul>
        
        </div>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    num: 0,
                    list_btn: ['选项一','选项二','选项三'],
                    list: [
                        {
                            title: '选项一',
                            content: "选项一内容"
                        },{
                            title: '选项二',
                            content: "选项二内容"
                        },
                        {
                            title: '选项三',
                            content: "选项三内容"
                        },
                    ]
                },
                methods: {
                    handleActive(index){
                        this.num = index;
                       
                    }
                }
            })
        </script>
    </body>
    </html>