Vuejs v-model特殊字符

时间:2017-07-06 15:01:15

标签: vue.js vuejs2

你可以用v-model转义特殊字符吗?我看到一个问题,我编辑从数据调用收到的文本。 'this'在编辑时显示为'&'#39; textarea中的'&#39'。我知道v-html,但你能用v-model吗?如果没有,还有什么选择?

2 个答案:

答案 0 :(得分:1)

v-model的作用类似v-text,并显示所有字符,而v-html则显示html代码。 如果您在源文件/调试器/响应中看到“this”,原因可能是编码或您尝试显示json-text。 因为'是NCR dez。对于角色'

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

答案 1 :(得分:0)

问题是您已编码文本,需要将其转换为纯文本。如果它是正确的HTML,一个常见的技巧是将其设置为临时div的innerHTML,然后从该div中提取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>
&#13;
&#13;
&#13;