绑定两个class，通过设置成立条件，判断是否添加当前class
<template> <div> <div v-for="item in items" :key="item.id" @click="change(item.name)" :class="{active : active == item.name, active1:active1==item.name}" @mouseover="mouseOver(item.name)" @mouseleave="mouseLeave" >{{item.name}}</div> </div> </template> <script> export default { data() { return { active :'', active1:'', items:[ { name:'swift' }, { name:'taylor' }] } }, methods:{ mouseOver(name){ this.active1 = name; }, mouseLeave(){ this.active1 = ''; }, change(name){ this.active = name; } } } </script> <style> .active { background: #fd7522; border: 1px solid #fd7522; color: #fff; } .active1{ background:blue; border: 1px solid #fd7522; color: #fff; } </style>