vue3方法控制图标显示隐藏

你可以使用Vue3的条件渲染指令 `v-if` 或 `v-show` 来控制图标的显示和隐藏。

`v-if` 会完全移除或重新创建DOM元素，当条件为 `false` 时，元素将从DOM中移除，当条件为 `true` 时，元素将被重新创建并插入到DOM中。

`v-show` 会使用CSS的 `display` 属性来控制元素的显隐，当条件为 `false` 时，元素会被隐藏，当条件为 `true` 时，元素会被显示。

下面是一个示例代码：

<template>
  <div>
    <button @click="showIcon = !showIcon">Toggle Icon</button>
    <i class="icon" v-if="showIcon"></i>
    <!-- 或者使用 v-show 指令 -->
    <!-- <i class="icon" v-show="showIcon"></i> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      showIcon: false,
    };
  },
};
</script>

<style>
.icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: red;
}
</style>

在这个示例中，我们使用 `v-if` 指令来控制图标的显示和隐藏，点击按钮时，`showIcon` 数据的值会被取反，从而切换图标的显示状态。如果你希望使用 `v-show` 指令，只需要将 `v-if` 替换为 `v-show` 即可。