组件化 iconfont 字体

来源：4-2 父子组件间的数据传递

大佬007

2020-09-18

老师你好，我在项目中想封装如图的组件图片描述

一个图标，一个文字title，和一个向右箭头

图标和title的内容是不确定的，通过外面传值觉得，图标使用iconfont

但我在传入图标代码时如：
组件并没有按照我的意愿去显示图标，而是自己显示了传入的文本，请问这个怎么解决？

写回答

2回答

大佬007

提问者

2020-09-18

<div class="row-container">
		<span v-if="icon" class='iconfont row-icon' >&#xe608;</span>
		<span class="row-title">{{title}}</span>
		<span class="iconfont row-right">&#xe62d;</span>
	</div>

上面是组件代码我直接在span标签内写可以显示图标

但我用差值表达式就不显示图标，而是直接显示成了文字

<span v-if="icon" class='iconfont row-icon' >{{icons}}</span> 这样不行

Samrtiboy

2020-09-18

同学你好，请问你是使用了那种方式引入的iconfont？还有你的代码没有正确显示，重新编辑一下吧

Samrtiboy

大佬007

你试一下使用v-html指令代替插值表达式，其实我更推荐你使用类的方式引入iconfont，这样你都不需要v-if了。

2020-09-18

共2条回复

Vue2.5-2.6-3.0开发去哪儿网App 零基础入门到实战

课程紧跟Vue3版本迭代，企业主流版本Vue2+Vue3全掌握

10675 学习 · 8191 问题

查看课程

相似问题

使用iconfont图库里别的图标，但是只有返回图标显示正常，请问如何解决？

回答 1

从父组件传值给子组件，为什么数据类型变了？父组件是object，子组件定义的也是object，但是typeof出来是string？

回答 2

载入不了ICONFONT文件

回答 1

非父子组件传值问题

回答 2

在局部定义组件时候在实力中定义TodoItem：TodoItem，为什么前面在实力中名字也必须是TodoItem

回答 2

打开慕课网App查看更多内容