(7)vue.js基础语法—data选项

2022/1/26 6:06:59

本文主要是介绍(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: {
        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中的属性名,索引值,要替换的新内容)。



这篇关于(7)vue.js基础语法—data选项的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程