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

最新推荐文章于 2024-05-08 17:51:53 发布

泽哥ins

最新推荐文章于 2024-05-08 17:51:53 发布

阅读量503

点赞数 1

分类专栏： Vue 文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/qq_36213140/article/details/122693884

版权

Vue 专栏收录该内容

32 篇文章 3 订阅

订阅专栏

一、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>

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

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

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

但是我们还是没有方法让我们的内容进行替换，这时可以借助 Vue.set() 方法替代操作，来实现数据驱动视图的效果。

语法：Vue.set(vue变量名.data中的属性名，索引值，要替换的新内容)。

泽哥ins

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
（7）vue.js基础语法—data选项

一、data选项示例• 用于存储 Vue 实例需要使用的数据，值为对象类型。<body>  <div id="app"> </div>  <script src="js/vue-2.6.14.js"></script> <script> new Vue({ el: '#app', data: {
复制链接

扫一扫