element plus 两个svg图标使用bool变量判断是否显示
时间: 2024-01-24 22:03:38 浏览: 22
在 Element Plus 中,可以使用 `el-icon` 和 `el-svg-icon` 来显示图标,其中 `el-svg-icon` 可以用来显示 SVG 格式的图标。要根据 bool 变量的值来判断是否显示图标,可以在组件模板中使用 `v-if` 或 `v-show` 指令。
示例代码如下:
```html
<template>
<div>
<el-icon v-if="showIcon" name="el-icon-check"></el-icon>
<el-svg-icon v-if="!showIcon" icon-class="my-svg-icon"></el-svg-icon>
</div>
</template>
<script>
import { ElIcon, ElSvgIcon } from 'element-plus';
export default {
components: {
ElIcon,
ElSvgIcon,
},
data() {
return {
showIcon: true,
};
},
};
</script>
```
在上面的示例代码中,`showIcon` 是一个 bool 类型的变量,它控制了两个图标的显示与隐藏。当 `showIcon` 的值为 `true` 时,`el-icon` 将显示 `el-icon-check` 图标;当 `showIcon` 的值为 `false` 时,`el-svg-icon` 将显示名为 `my-svg-icon` 的 SVG 图标。可以根据实际需求修改代码中的图标名称和 SVG 图标类名。