选项卡

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="js/vue.js"></script>
        <style>
            .red{
                background: red;
            }
            #app div{
                display: none;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <input 
                v-for="item,i in tabData" 
                type="button" 
                v-bind:value="item.title" 
                v-bind:class="{red:i===index}"
                v-on:click="tabHandle(i)"
                />
            <div 
                v-bind:style="{display:j===index?'block':'none'}"
                v-for="item,j in tabData"
            >
                <p v-for="option in item.list">
                    {{option.subTitle}}
                </p>
            </div>
            
        </div>
    </body>
    <script type="text/javascript">
        let tabData=[
            {
                title:'新闻',
                list:[
                    {
                        subTitle:"今天很好"
                    },
                    {
                        subTitle:"今天很好"
                    },
                    {
                        subTitle:"今天很好"
                    },
                ]
            },
            {
                title:'娱乐',
                list:[
                    {
                        subTitle:"出轨了"
                    },
                    {
                        subTitle:"结婚了"
                    },
                ]
            },
            {
                title:'体育',
                list:[
                    {
                        subTitle:"冠军"
                    },
                    {
                        subTitle:"冠军"
                    },
                    
                ]
            },
            
        ]
        
        let vm=new Vue({
            el:"#app",
            data:{
                tabData,
                index:0,
            },
            methods:{
                tabHandle(i){
                    this.index=i
                }
            }
        })
    </script>
</html>

相关阅读:
react组件销毁中清理异步操作和取消请求
只要一行代码，实现五种 CSS 经典布局
vue中如何安装sass，sass安装命令
每日总结
每日总结
每日总结
每周总结
每日总结
每日总结
每日总结

原文地址：https://www.cnblogs.com/gxywb/p/13528232.html