Vue 的 template 无法调用 new Vue里的data 属性

最新推荐文章于 2025-06-22 15:38:44 发布

飞翔的熊blabla

最新推荐文章于 2025-06-22 15:38:44 发布

阅读量3k

点赞数 1

分类专栏： html+js+jquery+css

html+js+jquery+css 专栏收录该内容

644 篇文章

订阅专栏

本文介绍了一个Vue组件中data属性的正确声明方式，从原本直接在data函数内部定义改为使用return返回一个包含所有属性的对象，这种方式有助于提高代码的可读性和维护性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原因是

data: function () {
        message: "Hello World!",
        count: 0,
        tasks: [
            "go to movie1",
            "go to movie2",
            "go to movie3",
        ],
        tasks2: [
            {body: "go to movieA", completed: false},
            {body: "go to movieB", completed: true},
            {body: "go to movieC", completed: false},
        ],
        points: 300,
},

改成

data: function () {
    return {
        message: "Hello World!",
        count: 0,
        tasks: [
            "go to movie1",
            "go to movie2",
            "go to movie3",
        ],
        tasks2: [
            {body: "go to movieA", completed: false},
            {body: "go to movieB", completed: true},
            {body: "go to movieC", completed: false},
        ],
        points: 300,
    }
},