Vue 模板 - 渲染 HTML 特殊字符代码

Question

如何在我的 Vue 模板中完全渲染 HTML 特殊字符代码？

例如我有这个 JSON 数据：

[{"id":"post91","slug":null,"title":"Breakfast & Tea"}]

如何将

Breakfast & Tea

转换为

Breakfast & Tea

？

我的 Vue 模板：

<h3 class="heading">{{ item.title }}</h3>

有什么想法吗？

Answer 1

最好的选择实际上是使用

v-html

：

<h3 class="heading" v-html="item.title"></h3>

不需要任何其他库。

Answer 2

使用像 he 这样的库更容易：

new Vue({
  el: '#app',
  created(){
    this.message = this.decode('Breakfast & Tea');
  },
  methods:{
    decode(str){
        return he.decode(str);
    }
  },
  data:{
    message: ''
  }
})

这是 JSFiddle：https://jsfiddle.net/86k1ge4b/

Answer 3

不应使用

v-html

，因为它存在漏洞。使用现代编辑器，可以轻松地将一些特殊字符直接粘贴到代码中，例如

›

，即

›

。