Vue.js 2中如何在v-html渲染与纯文本插入间切换且不重复标签

你原有代码失效的核心原因是Vue2中v-html指令的优先级高于标签内部的Mustache插值，当v-html绑定值为undefined时，Vue不会清空已渲染的内容，内部插值的文本也不会被渲染，因此达不到切换效果。

解决方案 #

无需编写两个h2标签，仅通过单个v-html绑定即可实现需求，思路是当需要渲染纯文本时，先将文本内容中的HTML特殊字符做转义处理，再传给v-html，转义后的内容在HTML渲染时就会以纯文本形式展示。

完整可运行代码如下：

HTML

<div id="app">
  <h2 v-html="displayContent"></h2>
  <button @click="toggle">
    switch
  </button>
</div>

JS

new Vue({
  el: "#app",
  data: {
    text:"Hello<br/>World",
    html:false
  },
  computed: {
    displayContent() {
      // 纯文本模式下转义HTML特殊字符
      if (!this.html) {
        return this.text
          .replace(/&/g, '&amp;')
          .replace(/</g, '&lt;')
          .replace(/>/g, '&gt;')
          .replace(/"/g, '&quot;')
          .replace(/'/g, '&#039;')
      }
      // HTML模式直接返回原内容
      return this.text
    }
  },
  methods: {
    toggle: function(){
        this.html = !this.html;
    }
  }
})

如果项目中多处需要用到HTML转义逻辑，可将转义部分封装为公共工具函数复用。

内容的提问来源于stack exchange，提问作者omega