返回旧版| 微信建站| 我要建站 | 建站学习 | 加入收藏
vue教程当前位置:首页 > cms教程 > 前端框架 > vue教程 > 正文

vue.js实例中data属性的三种写法及区别

发布时间:2020-08-28 21:51:15   来源:   点击:
data属性的三种写法
1、
  1. <script type="text/javascript"
  2.     var app=new Vue({ 
  3.         el:'#app'
  4.         data:{ 
  5.             isLogin: false 
  6.         } 
  7.     }) 
  8. </script> 

2、
  1. <script type="text/javascript"
  2.     var app=new Vue({ 
  3.         el:'#app'
  4.         data: function(){ 
  5.             return { 
  6.                 isLogin: false 
  7.             } 
  8.         } 
  9.     }) 
  10. </script> 

3、
  1. <script type="text/javascript"
  2.     var app=new Vue({ 
  3.         el:'#app'
  4.         data() { 
  5.             return { 
  6.                 isLogin: false 
  7.             } 
  8.         } 
  9.     }) 
  10. </script> 

第3种是第2种的ES6写法

区别
1)在简单的Vue实例中,没什么区别,因为你app对象不会被复用。

  1. var app = new Vue({...}) 

2)但是在组件中,因为可能在多处调用同一组件,所以为了不让多处的组件共享同一data对象,只能返回函数。

  1. export default
  2.     data(){ 
  3.         return { 
  4.             ... 
  5.         } 
  6.     } 
版权所有:郑州腾石网络科技有限公司 备案信息:豫ICP备18019117号
站长QQ:2863868475 业务合作咨询:15137100750(同微信)
本站所有投放的广告是有其他网站提供,不代表本站立场,同时网站首页广告位对外出租详情咨询本站站长!同时欢迎广大站长加入个人建站团队
  • 建站客服
  • CMS仿站
  • CMS学习
  • 技术交流群:336572814