Question

运行VueJS时遇到了一些问题。感觉这是一个bug，但我不是百分百肯定。当我使用带有转义双花括号的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-pre或v-html指令：

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

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

在您的网站上动态呈现任意HTML可能非常危险，因为它很容易导致XSS漏洞。只能使用可信内容的HTML插值，永远不会在用户提供的内容上内容。 https://vuejs.org/v2/guide/syntax.html#Raw-HTML