(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选项的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-01Vue.js 是什么-icode9专业技术文章分享
- 2024-11-01Vue3入门教程:从零开始搭建第一个Vue3项目
- 2024-11-01详解vueRouter4基础教程
- 2024-11-01Vuex4课程:初学者的完整入门指南
- 2024-10-31Vue3课程:新手入门到初级掌握
- 2024-10-31Vue3课程:新手入门到初级应用详解
- 2024-10-31VueRouter4课程:新手入门与实战指南
- 2024-10-31Vuex4学习:从入门到初级实战教程
- 2024-10-31Vue3教程:新手入门与基础实战
- 2024-10-31Vue教程:新手快速入门指南