组件化 iconfont 字体

Question

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

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

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

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

Answer 1

提问者 大佬007 2020-09-18 13:27: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>  这样不行

Answer 2

Samrtiboy 2020-09-18 12:27:40

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

• 提问者 大佬007 #1

  <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标签内写&#xe608;可以显示图标
  
  但我用差值表达式就不显示图标，而是直接显示成了&#xe608;文字
  <span v-if="icon" class='iconfont row-icon' >{{icons}}</span>  这样不行

• Samrtiboy 回复 提问者 大佬007 #2

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