javascript - VSCode 问题 : Vue example doesn't work in Firefox/Chrome, 但它可以在 jsfiddle 中使用

Question

当我在 Firefox 或 Chrome 中运行以下代码时，它会给出以下结果:

{‌{ value }}
{‌{ value }}
{‌{ element }}
{‌{ element }}
{‌{ element }}
{‌{ element }}

这是实际的代码，当我在 jsfiddle 或堆栈溢出中运行它时，它工作得很好:

new Vue({
  el: '#app',
  data: {
    testData: {
      name: 'TESTOBJECT', 
      id: 10,
      data: [1.67, 1.33, 0.98, 2.21]
    }
  }
});

 
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

<div id="app">
  <ul>
    <li v-for="value in testData">
      <template v-if="Array.isArray(value)">
        <div v-for="element in value">{{ element }}</div>
      </template>
      <template v-else>
        {{ value }}
      </template>
    </li>
  </ul>
</div>

可能是什么问题？

Answer 1

这是一个 VSCode 问题。它不会显示所有字符，但无论如何都会存储它们。所以它向我展示了以下内容:

{{ 值 }}

但实际上保存在文件中并由浏览器处理的内容是:

要防止此错误，您可以安装以下 VSCode 扩展:Highlight Bad Chars