Vue中data元素之间相互赋值的陷阱
今天在整理代码时,遇到这样的一个场景,下面将结合示例说明:
(一)在Vue文件中定义一个const常量,如下图所示:
(二)在data中有三个元素是这样赋值的,如下图所示:
(三)在created()或mounted()中打印上述三个数据元素的值,如下图所示:
(四)测试结果如下图所示:
(五)结果分析:
1、首先说说我为啥会这样赋值,有可能给name、alian1和alian2赋值时都是同一个值,并且这串字符又是比较长的,所以我就想当然地先将这串长字符赋值给name,然后通过this.name的方式赋值给alian1和alian2,结果就出人意料了,alian1和alian2的值都是undefined。
2、分析为何出现该结果,我个人按照JS的语法猜测,这可能跟变量未定义就先使用了有关,所以出现上述结果。
Vue中data元素之间相互赋值的陷阱的更多相关文章
- Vue中ajax返回的结果赋值
这是第二次在项目中遇到此问题,ajax请求成功后在success函数中为Vue实例data里的变量赋值,却失败了 new Vue({ el:'#app', data:{ msg:'' }, creat ...
- 5种方法去掉HTML中Inline-Block元素之间的空白
5种方法去掉HTML中Inline-Block元素之间的空白 记得年轻时我在IE6上开发,绝望的希望IE6能支持display: inline-block功能.当需要在”inline”元素上控制mar ...
- vue中的父子组件相互调用
vue中的父子组件相互调用: 1.vue子组件调用父组件方法:子组件:this.$emit('xx'); 父组件:定义yy方法,并在引用子组件时传参,如@xx="yy" 2.vue ...
- vue中父子组件之间的传值、非父子组件之间的传值
在Vue实例中每个组件之间都是相互独立的,都有自己的作用域,所以组件之间是不能直接获取数据.在项目开发中一个组件可能需要获取另一个组件的值,我们可以通过其他方法间接的获取.所以,获取的方法有以下几种: ...
- Vue中data重置问题
Object.assign() Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象.它将返回目标对象. 目标对象有1个,后边可以有多个源对象.注意他只会拷贝源对 ...
- IE7中绝对定位元素之间的遮盖问题
由于页面复杂就不上现实例子,举例说明. 两个同层级<div>元素,都设置了 position: relative;相对定位. 他们的内部的元素(不管什么元素了)都设置了position: ...
- vue中data必须是一个函数
前端面试时经常被问到:“组建中data为什么是函数”? 答案就是:在组件中data必须是一个函数,这样的话,每个实例可以维护一份被返回对象的独立拷贝.
- HTML表格中各元素之间属性之间的相互影响
开发了一个动态表格制作程序,用的是谷歌浏览器.发现几个现象,记录如下: 1.按照技术文档的说法,正规的表格样式如下: <table> <caption>标题</capti ...
- Vue中独立组件之间数据交互
独立组件之间数据交互:通过自定义事件 组件A中的[数据],传递给组件B 1.创建组件A,组件B 2.组件B在实例创建完成时就开始监听事件[等待接收数据]:钩子 3.组件A中触发事件,发送数据 注意:接 ...
随机推荐
- Mysql百万数据量级数据快速导入Redis
前言 随着系统的运行,数据量变得越来越大,单纯的将数据存储在mysql中,已然不能满足查询要求了,此时我们引入Redis作为查询的缓存层,将业务中的热数据保存到Redis,扩展传统关系型数据库的服务能 ...
- 九 Shell中的数组
数组:用一个变量存储一组数据,并能够对这组数据中的某一个数据单独操作. 数组的类型:一维数组.二维数组.多维数组 变量的类型 Shell中默认无类型 变量的值默认均视为文本 用在数字运算中时,自动将其 ...
- 低功耗设计技术--Multi VDD--Level shifter
本文转自:自己的微信公众号<集成电路设计及EDA教程> 前面的推文中我们分别介绍了低功耗设计中的Multi-VDD技术以及门控电源技术.在实际的低功耗设计中,门控电源技术中也常常结合Mul ...
- CRC循环冗余检测C语言实现----花了几天时间乱写的
由于笔者目前正在上计算机网络的课,老师要我们编一下crc的循环检测过程,所以我想着刚好在学c,那就随便看看写不写的了,首先百度了一下网上资料,基本都是用位移运算符实现的,由于本人懒得去看一下位移运算, ...
- Sopus库中FindEigen3.cmake内容详解笔记
FindEigen3.cmake: # - Try to find Eigen3 lib # Once done this will define # # EIGEN3_FOUND - system ...
- 吴sir讲Python之 ——Pycharm的教程使用(二)
欢迎您进入老吴的博客,如有联系请加QQ群:1055524279 Pycharm使用: 第一步:打开的界面: 选择代码路径和Python解释器版本 设置Pycharm菜单字体的大小: 设置编辑器里面字体 ...
- 目标检测之RCNN,fast RCNN,faster RCNN
RCNN: 候选区生成(Selective Search). 分割成2000左右的候选小区域 合并规则:颜色.纹理相近,尺度均匀,合并后形状规则 特征提取. 归一候选区尺寸为227×227,归一方法. ...
- [1天搞懂深度学习] 读书笔记 lecture I:Introduction of deep learning
- 通常机器学习,目的是,找到一个函数,针对任何输入:语音,图片,文字,都能够自动输出正确的结果. - 而我们可以弄一个函数集合,这个集合针对同一个猫的图片的输入,可能有多种输出,比如猫,狗,猴子等, ...
- C++ 基础--虚构函数
virtual 函数 示例代码如下: #include <stdio.h> class base { public: virtual void name(){printf("ba ...
- zabbix 自定义监控项每隔1分钟检测一次三次失败报警
在agent上添加 UserParameter=auth.check,/etc/zabbix/auth_monitor/auth_check.py auth.check就是之后添加的自定义的item值 ...