实现原理就是 主要利用v-for绑定的index来控制 用点击事件给display赋值 用动态绑定属性 判定给谁加类 用v-show控制判断display跟下面的内容区域是否相等
：class 动态绑定属性 ：class=“{类名：条件}”
条件满足显示为ture
<template>
<div class="auto">
<div class="head">
<ul class="clearfix">
<li
v-for="(item, index) in list"
@click="display = index"
:class="{ color: display == index }"
>
{{ item }}
</li>
</ul>
</div>
<div class="body">
<ul>
<LI v-for="(item, index) in list" v-show="display == index"
>我是{{ item }}的内容</LI
>
</ul>
</div>
</div>
</template>
<script>
export default {
data() {
return {
list: ["1", "2", "3", "4", "5"],
display: 0,
};
},
};
</script>
