本文共 796 字，大约阅读时间需要 2 分钟。
<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>
转载地址：http://wlwwk.baihongyu.com/