Vue+Element-ui中icon的动态切换

1,203 阅读1分钟

结合vue中class特性和iconfont官网中的iocn使用方法,我们可以按如下方式定义一个icon和它的类: <i :class="['iconfont', item.startFlag ? 'icon-zanting' : 'icon-kaishi']" @click="changeStartFlag" :title="item.startFlag ? '暂停' : '开始'"></i>,上面这段代码说明:i元素的类名,会随着item.startFlag的值变化,我们给这个i元素添加click事件,在每次点击时更新item.startFlag的值,即可实现icon的动态切换.

image.png