vue之tab切换

原创

朦胧淡月 2022-09-01 18:05:29 ©著作权

©著作权归作者所有：来自51CTO博客作者朦胧淡月的原创作品，请联系作者获取转载授权，否则将追究法律责任

<style>
            .active{
                color: red;
            }
            div a{
                 display: block;
                }
        </style>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 
<body>
    <!-- 
     1 循环除数据中的菜单选项 
       <li v-for="(v,i) in newInfo">  v表示数组newInfo中的所有数据
       因此要获取菜单直接 v.typeName

     2 获取当前点击的是第几个菜单选项  
       因此有点击事件 @click="index=i" 可以知道当前点击的是第几个元素的下标 赋值给index

     3 第一个item表示的 newInfo下的所有数据
       第一个info表示item.newList下的所有数据

     4此时已经将所有的数据都已经展示出来了  如何只展示相关的数据
       利用v-show结合索引值  index的菜单索引 是否 与内容索引i相等 v-show="index===i"

     5给当前点击的菜单添加激活类
       :class="{active:index===i}"  如果active等于true 就展示添加激活类
     -->
    <div id="myApp">
        <!-- 菜单选项 -->
        <li v-for="(v,i) in newInfo" @click="index=i" :class="{active:index===i}">
            {{v.typeName}}
        </li>     <!-- 内容 -->
        <div v-for="(item,i) in newInfo" v-show="index===i">
            <a :href="info.url" v-for="info in item.newList">{{ info.title}}</a>
        </div>
    </div>
</body><script>
var vm = new Vue({
    el: '#myApp',
    // data应该是一个对象哦
    data: {
        index: 0, //表示索引值
        newInfo: [{
                typeName: "军事",
                newList: [{
                        title: "美国发誓“毫不留情”对抗伊朗",
                        url: "http://news.ifeng.com/a/20181107/60149207_0.shtml?_zbs_baidu_news"
                    },
                    {
                        title: "普京主动送给中国一大宝贝 白宫：必须制止",
                        url: "http://hot.qianyan001.com/20181108/787511_1.html"
                    }
                ]
            },
            {
                typeName: "娱乐",
                newList: [{
                        title: "众星出席时装电影盛典 周迅赵薇baby杨幂唐嫣同框",
                        url: "http://fun.youth.cn/gnzx/201811/t20181108_11778380.htm"
                    },
                    {
                        title: "张艺兴发博回应海外人气质疑：榜单见不如舞台见",
                        url: "http://new.qq.com/omn/20181107/20181107A0UQZ9.html"
                    },
                    {
                        title: "昆凌晒照带儿女秋日游玩 周杰伦委屈评论：也不带我",
                        url: "http://ent.ifeng.com/a/20181108/43134878_0.shtml"
                    }
                ]
            },

            {
                typeName: "财经",
                newList: [{
                        title: "房价真跌了？2018年10月热点城市“房价地图”1",
                        url: "http://new.qq.com/zt/template/?id=FIN2018100800260300"
                    },
                    {
                        title: "房价真跌了？2018年10月热点城市“房价地图”2",
                        url: "http://new.qq.com/zt/template/?id=FIN2018100800260300"
                    },
                    {
                        title: "房价真跌了？2018年10月热点城市“房价地图”3",
                        url: "http://new.qq.com/zt/template/?id=FIN2018100800260300"
                    }
                ]
            }
        ]
    }
})
</script>