<template> <div> <div v-for="(item, index) in nameoptions" :class="{ active: index == isActive }" @click="checkItem(index)" :key="item.name" > {{ item.name }} </div> </div> </template> <script> export default { name: "", data() { return { isActive: 0, nameoptions: [ { name: "1", }, { name: "2", }, { name: "3", }, { name: "4", }, ], }; }, methods: { checkItem(index) { // console.log(index); this.isActive = index; }, }, }; </script> <style> .active { background-color: blue; color: #fff; } </style>
来源:https://blog.csdn.net/weixin_47384925/article/details/119783229