html5 - How to perform expression judgment on escape characters in vue.js?

Question

<text class="iconfont">{{selected == item.id ? '' : ''}}</text>
Write it like this, I Able to display the correct iconfont
However,
<text class="iconfont">{{selected == item.id ? item.selIcon : item.nmlIcon}}</text>
Define
nmlIcon in data: '',
selIcon : ''
At this time, I can’t display it

What is the reason for this? Experts, please give me some analysis, thank you!

Answer 1

This is because when you put a string in HTML, it is first parsed by Vue and then obtained by the browser, so the result is already escaped when it reaches Vue.

{{}} 即 v-text 是设置元素的 textContent, so it will not be escaped.

So you can use {{{}}} 或者 v-html instead.