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中触发事件,发送数据 注意:接 ...
随机推荐
- 微信小程序框架分析小练手(二)——天气微信小程序制作
简单的天气微信小程序. 一.首先,打开微信开发者工具,新建一个项目:weather.如下图: 二.进入app.json中,修改导航栏标题为“贵州天气网”. 三.进入index.wxml,进行当天天气情 ...
- Affinity Propagation Demo2学习【可视化股票市场结构】
这个例子利用几个无监督的技术从历史报价的变动中提取股票市场结构. 使用报价的日变化数据进行试验. Learning a graph structure 首先使用sparse inverse(相反) c ...
- python 内置模块之ConfigParser--配置读写
用于对特定的配置进行操作,当前模块的名称在 python 3.x 版本中变更为 configparser. #配置文件test.cfg [section1] k1 = v1 k2 :v2 k3 = 1 ...
- pandas 使用总结
import pandas as pd import numpy as np ## 从字典初始化df ipl_data = {'Team': ['Riders', 'Riders', 'Devils' ...
- Codeforces_825
A.连续1的个数,0用来分割,注意连续的0. #include<bits/stdc++.h> using namespace std; int n; string s; int main( ...
- symfony传参,接收参数,twig方法记录
呜呜呜,很烦,让我自己完成一个在线学习系统后端,和前端整合一下,我把接口参数搞了半天(学习symfony太久远),记录一下屈辱历史,以后注意,不然上线了一堆bug,很烦 下面是几种返回的数据的格式 1 ...
- python机器学习——正则化
我们在训练的时候经常会遇到这两种情况: 1.模型在训练集上误差很大. 2.模型在训练集上误差很小,表现不错,但是在测试集上的误差很大 我们先来分析一下这两个问题: 对于第一个问题,明显就是没有训练好, ...
- Go语言实现:【剑指offer】平衡二叉树
该题目来源于牛客网<剑指offer>专题. 给定一个二叉树,判断它是否是高度平衡的二叉树. 本题中,一棵高度平衡二叉树定义为: 一个二叉树每个节点 的左右两个子树的高度差的绝对值不超过1. ...
- javascript 客户端webSocket示例
//html <script> // 初始化一个 WebSocket 对象 var ws = new WebSocket("ws://localhost:9998/echo&qu ...
- 【笔记】Git简明教程
前言 Git这个东西我曾经有学过,但学的内容太多了,有点懵,不太理解,磕磕碰碰的,走了不少弯路.不过最近我在B站上发现了一个讲的很好的教程:<表严肃讲Git>.因此,我决定用文字的方式分享 ...