今天在整理代码时,遇到这样的一个场景,下面将结合示例说明:

  (一)在Vue文件中定义一个const常量,如下图所示:

  (二)在data中有三个元素是这样赋值的,如下图所示:

  (三)在created()或mounted()中打印上述三个数据元素的值,如下图所示:

  (四)测试结果如下图所示:

  (五)结果分析:

  1、首先说说我为啥会这样赋值,有可能给name、alian1和alian2赋值时都是同一个值,并且这串字符又是比较长的,所以我就想当然地先将这串长字符赋值给name,然后通过this.name的方式赋值给alian1和alian2,结果就出人意料了,alian1和alian2的值都是undefined。

  2、分析为何出现该结果,我个人按照JS的语法猜测,这可能跟变量未定义就先使用了有关,所以出现上述结果。

Vue中data元素之间相互赋值的陷阱的更多相关文章

  1. Vue中ajax返回的结果赋值

    这是第二次在项目中遇到此问题,ajax请求成功后在success函数中为Vue实例data里的变量赋值,却失败了 new Vue({ el:'#app', data:{ msg:'' }, creat ...

  2. 5种方法去掉HTML中Inline-Block元素之间的空白

    5种方法去掉HTML中Inline-Block元素之间的空白 记得年轻时我在IE6上开发,绝望的希望IE6能支持display: inline-block功能.当需要在”inline”元素上控制mar ...

  3. vue中的父子组件相互调用

    vue中的父子组件相互调用: 1.vue子组件调用父组件方法:子组件:this.$emit('xx'); 父组件:定义yy方法,并在引用子组件时传参,如@xx="yy" 2.vue ...

  4. vue中父子组件之间的传值、非父子组件之间的传值

    在Vue实例中每个组件之间都是相互独立的,都有自己的作用域,所以组件之间是不能直接获取数据.在项目开发中一个组件可能需要获取另一个组件的值,我们可以通过其他方法间接的获取.所以,获取的方法有以下几种: ...

  5. Vue中data重置问题

    Object.assign() Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象.它将返回目标对象. 目标对象有1个,后边可以有多个源对象.注意他只会拷贝源对 ...

  6. IE7中绝对定位元素之间的遮盖问题

    由于页面复杂就不上现实例子,举例说明. 两个同层级<div>元素,都设置了 position: relative;相对定位. 他们的内部的元素(不管什么元素了)都设置了position: ...

  7. vue中data必须是一个函数

    前端面试时经常被问到:“组建中data为什么是函数”? 答案就是:在组件中data必须是一个函数,这样的话,每个实例可以维护一份被返回对象的独立拷贝.

  8. HTML表格中各元素之间属性之间的相互影响

    开发了一个动态表格制作程序,用的是谷歌浏览器.发现几个现象,记录如下: 1.按照技术文档的说法,正规的表格样式如下: <table> <caption>标题</capti ...

  9. Vue中独立组件之间数据交互

    独立组件之间数据交互:通过自定义事件 组件A中的[数据],传递给组件B 1.创建组件A,组件B 2.组件B在实例创建完成时就开始监听事件[等待接收数据]:钩子 3.组件A中触发事件,发送数据 注意:接 ...

随机推荐

  1. 【译】Serilog 配置基础知识

    Serilog 使用简单的C# API来配置日志记录.当外部配置需要时,可以使用Serilog.Settings.AppSettings包(.NET 框架)或Serilog.Settings.Conf ...

  2. 在VMware中如何清理多余的空间

    问题描述 平时用的编程计算机只有250G空间,c盘和d盘,今天准备做实验,发现删除虚拟机中系统的内容不但没有减少空间,反而增加了,这时我意识到虚拟机内部可能与咱们想象的操作模式不一样. 解决办法 我的 ...

  3. 制作ASCII字符动画

    看过Matrix的同学应该还记得,在母舰上一直在计算的电脑屏幕在Neo觉醒的时候,不停的下落的杂乱无章的字符组成了Neo当时所处的场景.其实利用开源和免费的工具,我们可以将现有的视频转换为ASCII字 ...

  4. Go语言实现:【剑指offer】矩阵覆盖

    该题目来源于牛客网<剑指offer>专题. 我们可以用21的小矩形横着或者竖着去覆盖更大的矩形.请问用n个21的小矩形无重叠地覆盖一个2*n的大矩形,总共有多少种方法? 先放21,则f(n ...

  5. Spring——管理Bean的生命周期

    我们可以自定义bean的初始化和销毁方法,这里所指的的初始化和bean的构造不同,初始化是在bean构造完成后,对bean内部的属性或一些逻辑进行初始化. 首先要弄清一些概念: 构造(对象创建) 单实 ...

  6. 20191225--python学习第二天笔记(补)

    1.内容回顾 学习计算机基础 安装解释器 2.语法 print/input 整型 int/字符串 str/布尔类型 boolen 条件语句 and运算符 变量 3.练习 评分规则:用户输入成绩,根据成 ...

  7. 《自拍教程17》Python调用命令

    他山之石 何为他山之石,就是借助外界工具,来实现自己想要的功能. 命令行界面软件, 即各种命令,我们也叫命令行工具, 此类工具也是测试人员或者开发人员常用的工具的一种. 测试人员可以借助这类工具,快速 ...

  8. centos7.5下yum安装mysql-5.6.43

    cd ~/ && cat /etc/redhat-release yum list installed |grep mysql #<===查看是否安装mysql,如果已经安装,使 ...

  9. [CSS]三大特性之一继承性、层叠性、优先级

    <style> div { color: red; font-size: 30px; {#background: #0066ff;#} } </style> <!-- 1 ...

  10. mac下搭建http服务器(apache+php),使用homebrew升级php

    新版mac依旧预装了 Apache ,但是已经不能在 「系统偏好设置」中的「Web 共享」来开启了,需要手动通过命令行开启. 启动Apache 启动:sudo apachectl start 停止:s ...