·用于存储Vue 实例需要使用的数据,值为对象类型。

    data 选项 - 图1

    ·data中的数据可以通过vm.$data.数据或vm.数据访问。

    data 选项 - 图2

    ·data中的数据可以直接在视图中通过插值表达式访问。

    ·data中的数据为响应式数据,在发生改变时,视图会自动更新。

    data 选项 - 图3

    ·data 中存在数组时,索引操作与length操作无法自动更新视图,

    这时可以借助Vue.set()方法替代操作。

    data 选项 - 图4

    <!DOCTYPE html> <html lang=“en”> <head> <meta charset=“UTF-8”> <meta name=“viewport” content=“width=device-width, initial-scale=1.0”> <title>Document</title> </head> <body> <div id=“app”> <ul> <li>{{ arr[0] }}</li> <li>{{ arr[1] }}</li> <li>{{ arr[2] }}</li> </ul> </div> <script src=“lib/vue.js”></script> <script> var vm = new Vue({ el: ‘#app’, data: { // title: ‘标题文本’, arr: [‘内容1’, ‘内容2’, ‘内容3’] } }); // console.log(vm.$data.title); // console.log(vm.title); // 更常用 </script> </body> </html>