vue默认三个图标点击哪个亮哪个图标实例代码

你可以使用 `v-bind:class` 和条件语句来实现这个效果。以下是一个简单的例子：

<template>
  <div>
    <i class="icon" :class="{ active: activeIcon === 'icon1' }" @click="activeIcon = 'icon1'">Icon 1</i>
    <i class="icon" :class="{ active: activeIcon === 'icon2' }" @click="activeIcon = 'icon2'">Icon 2</i>
    <i class="icon" :class="{ active: activeIcon === 'icon3' }" @click="activeIcon = 'icon3'">Icon 3</i>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIcon: 'icon1'
    };
  }
};
</script>

<style>
.active {
  color: red;
}
</style>

在上面的代码中，我们使用了 `v-bind:class` 来绑定一个 class，这个 class 根据 `activeIcon` 的值来判断是否添加。点击每个图标时，我们会将 `activeIcon` 的值设置为相应的值，这样就可以实现点击哪个亮哪个的效果了。

相关问题

vue默认三个图标点击哪个亮哪个实例代码

假设你有三个图标，它们的类名分别为 `icon1`、`icon2`、`icon3`，你可以在 Vue 的模板中添加点击事件，然后在方法里面切换它们的样式类名。下面是一个简单的实例代码：

<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` 变量来保存当前选中的图标名，在点击事件中更新它的值，从而实现了点击哪个图标亮哪个的效果。

vue默认三个图标点击哪个切换图标实例代码

以下是一个简单的例子，展示如何使用 Vue 和三个图标来切换显示不同的内容：

HTML：

<div id="app">
  <button @click="selectedIcon = 'home'"><i class="fas fa-home"></i></button>
  <button @click="selectedIcon = 'user'"><i class="fas fa-user"></i></button>
  <button @click="selectedIcon = 'settings'"><i class="fas fa-cog"></i></button>

  <div v-if="selectedIcon === 'home'">
    <h1>Home Page</h1>
    <p>Welcome to the home page!</p>
  </div>
  <div v-if="selectedIcon === 'user'">
    <h1>User Profile</h1>
    <p>Here is your user profile information.</p>
  </div>
  <div v-if="selectedIcon === 'settings'">
    <h1>Settings</h1>
    <p>Customize your settings here.</p>
  </div>
</div>

JavaScript：

new Vue({
  el: '#app',
  data: {
    selectedIcon: 'home'
  }
});

在这个例子中，我们使用了三个 FontAwesome 图标（home、user、cog），并将它们包装在按钮标签中。当用户点击其中一个按钮时，我们将 selectedIcon 数据属性更新为所点击的图标名称。然后，我们使用 v-if 指令来根据 selectedIcon 的不同值来显示不同的内容。