Vuejs v-model特殊字符

Question

你能用v-model来转义特殊字符吗？我在编辑从数据调用中收到的文本时遇到了一个问题。编辑时，“this”在文本区域中显示为“&”；this“”。我知道v-html，但是你能把它和v-model一起使用吗？如果没有，另一个选择是什么？

Answer 1

v-model的工作原理类似于v-text，它可以显示所有字符，而v-html可以让你显示html代码。如果您在源文件/debugger/response中看到"this“，原因可能是编码或您试图显示json-text。因为'是NCR。对于角色'。

v-model提供自动双向绑定，如果您不需要，可以使用其他指令之一。

Answer 2

问题是您有编码的文本，您需要将其转换为纯文本。如果它是正确的超文本标记语言，一种常见的技巧是将其设置为临时目录的innerHTML，然后从该目录中提取textContent。我已经在下面的代码片段中创建了一个小辅助函数来实现这一点。

您给出的文本看起来有一些额外的引号，所以您可能需要对数据进行更多的修改，以使其不受污染，但方法仍然是我在这里所展示的:获取文本，对其进行去污染，并将未受污染的文本赋给您想要编辑的变量。

​

const scratchDiv = document.createElement('div');
function toPlainText(html) {
  scratchDiv.innerHTML = html;
  return scratchDiv.textContent;
}

new Vue({
  el: '#app',
  data: {
    plainText: ''
  },
  mounted() {
    // fetching code-polluted text
    this.plainText = toPlainText("'this&#39");
  }
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<div id="app">
  <textarea>
  {{plainText}}
  </textarea>
</div>

​