VueJS 评估转义字符

Question

我在运行 VueJS 时遇到了一些问题。感觉这是一个错误，但我不是 100% 确定。当我有带有转义双花括号的 HTML 时，它仍然会被引擎评估。

HTML：

<body>
  <div id="body">
    <ul>
      <li v-for="bar in foo">{{ bar }}</li>
    </ul>
    &#123;&#123; foo &#125;&#125;
  </div>
</body>

JavaScript：

new Vue({
  data: function() {
    return {
        foo: ['bar', 'foobar',] 
    };
  },
    el: '#body',
});

我希望看到的输出是：

<body>

  <div id="body">
      <ul><li>bar</li><li>foobar</li></ul>

      {{ foo }}
  </div>
</body>

但是，我得到的是：

<body>      
  <div id="body"><ul><li>bar</li><li>foobar</li></ul>
    ["bar","foobar"]
  </div>
</body>

有什么办法可以阻止这种情况发生吗？

Answer 1

您需要使用v-preorv-html指令：

<span v-pre>{{ foo }}</span>

<span v-html="'{{ foo }}'"></span>

在您的网站上动态渲染任意 HTML 可能非常危险，因为它很容易导致 XSS 漏洞。仅对受信任的内容使用 HTML 插值，切勿对用户提供的内容使用。 https://vuejs.org/v2/guide/syntax.html#Raw-HTML