一.思路总结 1.遍历出来对应的数组， 在click中赋值 遍历出来的item。 2.class进行决定是否显示，一点击就把对应的item赋到active中 3.此时active就和item.id一模一样的文本，然后返回一个true能显示当前的了 4.把最后一个瑕疵补上， 让第一个默认选中。就是把active放一个数值就行了
<template> <div id="app"> <ul> <li v-for="item in list" :key="item.id" @click="getdata(item.id)" :class="[{active: active == item.id}]"> <span>{{item.name}}id是{{item.id}}</span> </li> </ul> </div> </template> <script> export default { data () { return { list: [{ id: 1, name: '网易' }, { id: 2, name: '腾讯' }, { id: 3, name: '爱奇艺' }, { id: 4, name: '优酷' }], active: 1 } }, methods: { getdata (id) { this.active = id } } } </script> <style lang="less" > ul { list-style: none; text-align: center; display: flex; } ul>li { padding: 15px; border-radius: 30px; } .active { transition: all .8s; background: #000; color: #fff; } </style>