vue默认三个图标点击哪个亮哪个实例代码
时间: 2023-07-26 14:05:27 浏览: 51
假设你有三个图标,它们的类名分别为 `icon1`、`icon2`、`icon3`,你可以在 Vue 的模板中添加点击事件,然后在方法里面切换它们的样式类名。下面是一个简单的实例代码:
```html
<template>
<div>
<i class="icon1" :class="{active: activeIcon === 'icon1'}" @click="toggleIcon('icon1')"></i>
<i class="icon2" :class="{active: activeIcon === 'icon2'}" @click="toggleIcon('icon2')"></i>
<i class="icon3" :class="{active: activeIcon === 'icon3'}" @click="toggleIcon('icon3')"></i>
</div>
</template>
<script>
export default {
data() {
return {
activeIcon: '',
};
},
methods: {
toggleIcon(iconName) {
this.activeIcon = iconName;
},
},
};
</script>
<style>
.active {
color: red;
}
</style>
```
在上面的代码中,我们使用了 `:class` 绑定语法,根据当前选中的图标名判断是否添加 `active` 类名,来改变图标的样式。同时,我们也定义了一个 `activeIcon` 变量来保存当前选中的图标名,在点击事件中更新它的值,从而实现了点击哪个图标亮哪个的效果。