VSCode 问题：Vue 示例在 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问题。 它不会显示所有字符，但无论如何都会存储它们。 所以它向我展示了以下内容：

{{ value }}

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

为防止出现此错误，您可以安装以下 VSCode 扩展： Highlight Bad Chars

Answer 2

通常这样做是简单的导入 vuejs，拿你的代码，它的工作原理：

HTML

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
</head>
<body>
    <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>
    <script src="app.js"></script>
</body>
</html>

应用程序.js

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

VSCode 问题：Vue 示例在 Firefox/Chrome 中不起作用，但在 jsfiddle 中有效

问题描述

2 个解决方案

解决方案1
1 已采纳 2020-02-21 10:16:12

解决方案2
0 2020-02-21 09:57:30

VSCode 问题：Vue 示例在 Firefox/Chrome 中不起作用，但在 jsfiddle 中有效

问题描述

2 个解决方案

解决方案1 1 已采纳 2020-02-21 10:16:12

解决方案2 0 2020-02-21 09:57:30

解决方案1
1 已采纳 2020-02-21 10:16:12

解决方案2
0 2020-02-21 09:57:30