vue默认三个图标点击哪个切换图标默认第一是点击后的效果实例代码
时间: 2023-11-22 15:53:38 浏览: 28
Vue默认的三个图标可以使用`<v-icon>`标签来实现,其中点击后的效果可以通过`v-model`来实现。以下是一个简单的实例代码:
```vue
<template>
<div>
<v-icon v-model="activeIcon" @click="toggleIcon('mdi-home')">
mdi-home
</v-icon>
<v-icon v-model="activeIcon" @click="toggleIcon('mdi-heart')">
mdi-heart
</v-icon>
<v-icon v-model="activeIcon" @click="toggleIcon('mdi-star')">
mdi-star
</v-icon>
</div>
</template>
<script>
export default {
data() {
return {
activeIcon: "mdi-home",
};
},
methods: {
toggleIcon(icon) {
this.activeIcon = icon;
},
},
};
</script>
```
在上述代码中,我们使用了`v-model`来绑定`activeIcon`变量,以便于我们可以在点击图标时修改它的值。同时,我们使用了`@click`来监听图标的点击事件,并在事件处理函数中修改`activeIcon`的值,从而实现了点击后的效果切换。