vue中区分data：和return中data（）

最新推荐文章于 2023-07-20 17:29:00 发布
原创 最新推荐文章于 2023-07-20 17:29:00 发布 · 265 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端

博主在尝试登录后保存用户名并在页面显示，遇到困难。已成功打印出返回的数据，发现是一个从0开始的数组。问题在于如何正确地从数组中提取并展示用户名。

遇见困难的原因：
我想在登录之后，将用户名保存下来，把数据展示到用户登录之后的页面（例如用户是sda）：
在这里插入图片描述
在测试的时候，可以使用 console.log() 将数据打印出来：

我只打印了return中data（）里面的数据，
在这里插入图片描述
在这里插入图片描述
打印的数据是：
在这里插入图片描述
通过上图不难发现，这是一个数组，而且角标是以0开始的。

vue实例中data使用return包裹的方法
10-18
data: { msg: '', }, methods: { // ... } }) ``` 然而，在组件化开发的大型项目中，我们通常会使用`export default`来导出一个包含`data`方法的对象，而不是直接定义一个`data`对象。在这种情况下，`data`是...
vue-merge-data:智能合并Vue渲染功能的数据
05-18
然后，在Vue渲染函数中使用它： // Normal component export default { name : 'primary-button' , props : { mini : Boolean } , render ( h ) { return h ( 'base-button' , mergeData ( this . $vnode . ...
vue中的data用return返回
u014545085的博客
06-27 2456
为什么在大型项目中data需要使用return返回数据呢？ 答：不使用return包裹的数据会在项目的全局可见，会造成变量污染；使用return包裹后数据中变量只在当前组件中生效，不会影响其他组件。 1、在简单的vue实例中看到的Vue实例中data属性，如下所示： let app= newVue({ el:"#app", data:{ msg:'' }, methods:{ } }) 2、在使用...
vue 组件化时 return data 时，如何更新data中的数组或对象；Object.assign 使用方法，及扩展运算符 ...使用方法
我是左小皓
10-01 4621
通常vue中的data初始赋值方式为 var vm = new Vue({ el:"#app", data:{ a:1, b:[{ c:6, d:7 }] } }) 当需要更新b的值时，需要先拷贝一个复本出来 很简单， mounted:function()...
Vue:通过浏览器控制台查看全局data值
第一段代码的博客
04-20 1万+
Vue中借助data实现了数据的存储和中转,方便了界面的绑定渲染和值使用. 一些时候,为了调试程序,我们可能需要通过浏览器来查看data中的值到底目前是一个什么情况,方便调试和查找问题. 而现有基于Vue-cli框架和单个页面的Vue在定义时,会导致data获取值方法不相同.尤其是通过Vue-cli创建的,里面的文件都是一个个的组件，如何在控制台中修改，查看组件data里的值?? (1)没有或找不到具体的Vue对象 发现很多通过Vue-Cli创建的具体页面在定义data后,export时,多半没有对
Vue-在data中引入静态图片路径
每一次跌倒都是为了华丽的站起来。
09-01 8105
Vue-在data中引入静态图片路径
对于vue的认识 【data中的return】
qq_36635786的博客
02-08 647
讲述一下 vue 组件中为什么要把 data 对象改成函数并使用 return属性？
vue里的data要用return返回的原因浅析
10-16
data: { message: 'Hello' } }); ``` 在上述代码中，`data`是一个对象，包含组件的初始状态。然而，在实际项目中，特别是大型项目，组件往往需要复用，此时直接使用对象形式定义`data`会出现问题。因为每个组件...
vue data 中的 return 用法
AKM5201314的博客
05-10 1万+
文章目录一、vue 里面的data return 是什么？二、如何使用1.vue 双向绑定 v-model2.带有 ":"的属性 比如:class、:id等等3. 标签使用return里面的属性 提示：以下是本篇文章正文内容，下面案例可供参考 一、vue 里面的data return 是什么？ uniapp项目 vue 结构中data 里面的return详解 从字面上理解 data 是数据的意思 return是返回的意思,我个人理解的是 将数据返回出去。 二、如何使用 1.vue 双向绑定 v-mo
03. Vue3 中的条件判断与循环
江帅帅
06-18 2395
在 Vue 中判断条件，咱可以用 v-if，意思就是「如果 xxx 的话，那就 xxx」。当满足条件，也就是条件返回 true 的时候，就可以做它要做的事情了。
vue.js笔记2（data、methods）
China_C_boss的博客
01-13 531
1.vue的实体： 创建实体： var vm = new vue({}) 2.vue的el、data、methods： vue构造器有个“el”参数，它和DOM中的id值是一样才可以相互链接，还有el残数设置时是有个#号的。 div中可以使用{{}}这个符号来取vue中data申明的值，也可以使用{{}}来执行methods 写的方法并获取到方法的返回值。 ...
vue中data 需要return返回
gwdgwd123的博客
04-29 763
诚明小巫 de 博客 勤修戒定慧，熄灭贪嗔痴。 QQ：1312528339 为什么vue中的data用return返回 1、为什么在项目中data需要使用return返回数据呢？ 不使用return包裹的数据会在项目的全局可见，会造成变量污染；使用return包裹后数据中变量只在当前组件中生效，不会影响其他组件。 当一个组件被定义， data 必须声明为返回一个初始数据对象的函数，因为...
vue中的data要用return返回
qq_60163657的博客
03-17 4014
1.不使用return包裹的数据会在项目全局可见，会造成变量污染，使用return包裹数据中的变量只在当前组件中生效，不会影响其他组件 2.当一个组件被定义，data必须为其声明返回一个初始数据对象的函数，因为组件可能被用来创建多个实例 //简单vue实例中data属性是如下方式展示 对象式 let app = newVue ({ el:"#app", data:{ name:'' } }) //在组件实例化项目中 函数式 组件必须使用 export d
Vue为什么使用return返回data对象的原因
TianQiWanLaiQiu的博客
07-20 2294
Vue要求data必须是一个返回对象的函数，是为了保证组件之间数据的隔离，实现数据的响应式，并避免共享数据带来的问题。这是Vue框架设计的重要特性之一，为开发者提供了更加安全、稳定和灵活的数据管理方式。因此，我们在使用Vue开发项目时，应该始终遵循将data设置为一个返回对象的函数的规范，以充分发挥Vue的响应式和数据隔离特性，提高应用的可维护性和稳定性。
03.VUE入门
guan_xfeng的博客
04-28 604
框架: 前端框架:为开发前端代码服务的 比如:vue.js node.js reactive.js 等等 后端框架:为开发后端代码服务的 比如:spring,mybatis,springboot,springcloud 自定义框架 比如:刚刚定义的前端框架 小结: 框架是一个"半成品"的应用,我们实际开发中,基于框架开发,提高开发效率 需求:抽奖系统,随机抽取获奖的幸运用户 <!DOCTYPE html> <html> <head> <meta cha
vue中data是否使用return的区别
tiankongxiao的博客
08-29 5196
// Vue实例中data属性是如下方式展示的： let app = newVue({ el: "#app", data: { msg: '' }, methods: {} }) // 使用组件化的项目中是如下方式展示的: export default{ data(){ return{ showLogin:true, ...
为什么vue中的data用return返回
weixin_45156610的博客
07-24 1万+
为什么vue中的data用return返回 一.原 [vue 修改对象方法] 1.set方法,添加一个属性和值 set方法还可以为对象添加属性和值 <script> export default { data(){ return { obj:{ name:'xiaom...
vue实例中data使用return包裹
热门推荐
pobu168的博客
06-07 2万+
vue组件变量污染
vue中data函数中return 理解
YFirst_的博客
05-18 1万+
【个人笔记】vue中data函数中为何return 相关理解 常见小项目、示例中的data写法为： ​ data:{ a: 10} 这种写法data对象是引用类型 大项目中通常要return新对象： data(){return {a:10}} 函数写法，每次返回新对象 为什么要return 呢？ 因为如果vue项目过大，创建多个相同组件时，未用 return 创建新对象的 data 都将指向同一个地址，造成数据污染， 通过函数写法return一个新对象，对象地址不同，数据之间相互独立，避免数据污
在vue中data：和data（）有什么区别
03-29
在Vue中，`data:`和`data()`两个写法是用来定义组件的数据的，但是写法不同，有以下区别： 1. `data:`是ES6的写法，用于在组件定义时定义数据，是一个对象字面量。例如： ```javascript export default { data: { message: 'Hello World!' } } ``` 2. `data()`是Vue的写法，用于在组件定义时定义数据，是一个函数。在组件实例化时，会调用该函数并返回一个对象，该对象就是组件的数据。例如： ```javascript export default { data() { return { message: 'Hello World!' } } } ``` 3. `data()`写法的好处是可以在每个组件实例化时都返回一个新的数据对象，避免组件之间的数据互相污染。 总结：`data:`是ES6的写法，`data()`是Vue的写法。二者都可以用来定义组件的数据，但是`data()`可以避免数据污染问题。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值