vue2怎么渲染el-icon-s-home字符串图标
时间: 2024-05-07 11:22:46 浏览: 108
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
在 Vue2 中,可以通过绑定 `:class` 属性来渲染 `el-icon-s-home` 字符串图标。具体步骤如下:
1. 首先,在使用该字符串图标的组件中,需要导入 `element-ui` 的样式文件,例如:
```html
<link rel="stylesheet" href="//unpkg.com/element-ui/lib/theme-chalk/index.css">
```
2. 然后,在模板中使用 `el-icon` 标签,并绑定 `:class` 属性,例如:
```html
<template>
<div>
<i class="el-icon" :class="'el-icon-s-home'"></i>
</div>
</template>
```
其中,`:class` 属性绑定的是一个对象或数组,这里我们绑定的是一个字符串 `'el-icon-s-home'`,这样就可以渲染出 `el-icon-s-home` 字符串图标了。
3. 如果需要使用其他样式的 `el-icon` 图标,只需要将 `:class` 属性绑定的字符串改为对应的样式类名即可,例如:
```html
<template>
<div>
<i class="el-icon" :class="'el-icon-s-promotion'"></i>
</div>
</template>
```
这样就可以渲染出 `el-icon-s-promotion` 样式的图标了。
阅读全文