默认选择的第一个,当选择第二个时,只有第二个变颜色
html代码
<ul>
<li
:class="{ actived: index == isactive }"
v-for="(item, index) in textList"
:key="index"
@click="nameSelect(item.name, index)"
>
{{ item.name }}
</li>
</ul>
CSS代码
ul {
display: flex;
margin-left: 55px;
li {
padding: 11px 20px;
margin-left: 13px;
border-radius: 2px 0px 0px 2px;
opacity: 1;
border: 1px solid #59bad5;
font-size: 22px;
font-weight: 400;
color: #3aaeff;
cursor: pointer;
}
.actived {
font-weight: 600;
color: red;
}
}
vue3.0的JS关键代码
setup() {
const textList = [
{ name: "成都大学锦江学院店" },
{ name: "成都文理店" },
{ name: "成都理工店" },
{ name: "四川大学店" },
{ name: "电子科大店" },
{ name: "其它" }
];
const isactive = ref(0);
const nameSelect = (res, index) => {
console.log(res, index);
isactive.value = index;
};
return {textList, nameSelect, isactive };
}