javascript - vue.js 入门不起作用

标签 javascript vue.js

我是第一次尝试 vue.js,并且是一名初学者 javascript 程序员。我正在浏览 vue.js getting started page

我的html代码是:

<!DOCTYPE html>
<html>
    <head>
      <meta charset="utf-8">
      <title>React Tutorial</title>
      <script src="bower_components/vue/dist/vue.js"></script>
      <script src="js/myVue.js"></script>
    </head>
    <body>
        <div id="demo">
            <h1>&#123;&#123;title | uppercase&#125;&#125;</h1>
            <ul>
                <li
                    v-for="todos"
                    v-on="click: done = !done"
                    class="&#123;&#123;done ? 'done' : ''&#125;&#125;">
                    &#123;&#123;content&#125;&#125;
                </li>
            </ul>
        </div>
    </body>
</html>

myVue.js 文件是

window.onload = function () {
    var demo = new Vue({
        el: '#demo',
        data: {
            title: 'todos',
            todos: [
                {
                    done: true,
                    content: 'Learn JavaScript'
                },
                {
                    done: false,
                    content: 'Learn Vue.js'
                }
            ]
        }
    });
}

入门代码很旧,因为 v-repeat 已被弃用并被 v-for 取代。当我使用 v-for 时,我收到警告“v-for 中需要别名”。我还得到一个未捕获的类型错误“无法读取未定义的属性“create”。

JSFiddle 代码也不起作用。

最佳答案

v-for 需要别名 意味着您必须在 for 循环中命名变量,如下所示:

<li
    v-for="todo in todos"
    @click="todo.done = !todo.done"
    v-bind:class="{'done' : todo.done}">
    {{todo.content}}
</li>

关于javascript - vue.js 入门不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34940087/

相关文章:

Javascript:试图平滑自定义光标动画

javascript - ajax 请求获取 'canceled' 现在网站已上线

javascript - Vuejs $remove 按日期分组的数据

javascript - Vue : How to implement Table search

Javascript 使用 momentjs 在时区之间进行转换

javascript - 加载页面时,">"符号显示为 "&gt;"

javascript - Google 脚本 - 用于多张工作表的一个运行编辑脚本

javascript - 使用 vue.js 组件和属性调用函数

javascript - Vue2 : Avoid mutating a prop directly inside component

javascript - v-else-if 在 vuejs : Failed to resolve directive: else-if 中不起作用