（7）vue.js基础语法—data选项

2023-12-03 17:04:10

一、data选项示例

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

<body>
  <!-- 视图层 -->
  <div id="app">

  </div>
  <!-- 数据层 -->
  <script src="js/vue-2.6.14.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        title: '这是标题'
      }
    })
  </script>
</body>

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

<body>
  <!-- 视图层 -->
  <div id="app">

  </div>
  <!-- 数据层 -->
  <script src="js/vue-2.6.14.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        title: '这是标题'
      }
    })
    console.log(vm.$data.title);
    console.log(vm.title);
  </script>
</body>