Vue.js 文档示例在 Codepen 中不起作用？

问题描述

我只是想从 Vue.js's documentation 复制复选框的示例，但是当我将 Vue 导入 codepen.io，然后将多个复选框的代码粘贴到 JS 字段中，然后将 HTML 粘贴到 HTML 字段中时，我明白了

Checked names: {{ checkednames }}

当我单击特定名称的复选框时，例如“Jack”，这不会改变任何内容。它仍然读取。

Checked names: {{ checkednames }}

我在这里做错了什么？

解决方法

它在 vue 中工作，因为内部在他们的网站上有 vue-setup，要在 codepen 中使用它，你必须导入 vue cdn，然后你需要创建一个 vue 实例并附加到根 DOM 中。您可以参考以下代码片段。

下面的代码是 vue 2.0，vue 现在有最新版本的 vue 3.0，你也可以看看Vue 3

const app = new Vue({
  el: '#app',data: {
    checkedNames: []
  }
})

<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<body>
  <div id="app">
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
    <label for="jack">Jack</label>
    <input type="checkbox" id="john" value="John" v-model="checkedNames">
    <label for="john">John</label>
    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
    <label for="mike">Mike</label>
    <br>
    <span>Checked names: {{ checkedNames }}</span>
  </div>
</body>

</html>

codepen html vue.js