vue data变量相互赋值后被实时同步的解决步骤


Posted in Javascript onAugust 05, 2020

数据结构是这样子的

data() {
   return {
    title: 'web前端 this data变量相互赋值后被实时同步问题',
    val_1: 'vue',
    val_2: ''
   }
}

问题源:

我们在onload()把val_1 赋给 val_2 (或者在用户click时更改也都会出现这个问题)

onload() {
 this.val_2 = this.val_1;
}

解决方法:

我们在通过JavaScript把 “val_1” 转换成字符串类型,再JSON.parse,最后再赋给 “val_2” 就解决了

onload() {
 this.val_2 = JSON.parse(JSON.stringify(this.val_1));
}

补充知识:vue定义的全局变量在一个方法赋值过后在另一个方法中是空

在学习vue的过程中,发现了许多小的问题,例如:我定义一个全局变量a,为了可以在下面定义的方法中一直取得到这个全局变量,在方法中我添加了一个jquery的click方法,在这个方法里面用this.a = b(自定义的一个变量);然后到另一个方法中去使用这个全局变量a,发现根本没有进行赋值,还是原来的全局变量的值。

原因如下:因为click函数使this的指向发生了变化。所以要在click函数的外面添加一句:

var self = this;

然后在click函数里面为全局变量赋值要写:

self.a = b;

这样就不会改变this的指向了!

以上这篇vue data变量相互赋值后被实时同步的解决步骤就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery 选择器 xpath 语法应用
May 13 Javascript
jQuery学习之prop和attr的区别示例介绍
Nov 15 Javascript
JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法
Nov 03 Javascript
html的DOM中Event对象onabort事件用法实例
Jan 21 Javascript
JavaScript获取按钮所在form表单id的方法
Apr 02 Javascript
浅谈javascript事件取消和阻止冒泡
May 26 Javascript
JavaScrip调试技巧之断点调试
Oct 22 Javascript
JavaScript编写九九乘法表(两种任选)
Feb 04 Javascript
老生常谈angularjs中的$state.go
Apr 24 Javascript
Angular ElementRef简介及其使用
Oct 01 Javascript
VUEX采坑之路之获取不到$store的解决方法
Nov 08 Javascript
Vue是怎么渲染template内的标签内容的
Jun 05 Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
Aug 05 #Javascript
vue 需求 data中的数据之间的调用操作
Aug 05 #Javascript
js实现简单选项卡制作
Aug 05 #Javascript
vue 内联样式style中的background用法说明
Aug 05 #Javascript
vue flex 布局实现div均分自动换行的示例代码
Aug 05 #Javascript
微信小程序实现上传照片代码实例解析
Aug 04 #Javascript
JavaScript实现烟花绽放动画效果
Aug 04 #Javascript
You might like
关于文本留言本的分页代码
2006/10/09 PHP
Yii2超好用的日期和时间组件(值得收藏)
2016/05/05 PHP
PHP编写的图片验证码类文件分享
2016/06/06 PHP
Nigma vs Liquid BO3 第一场2.13
2021/03/10 DOTA
验证用户是否修改过页面的数据的实现方法
2008/09/26 Javascript
JQuery 写的个性导航菜单
2009/12/24 Javascript
jquery实现表格奇数偶数行不同样式(有图为证及实现代码)
2013/01/23 Javascript
禁止ajax缓存获取程序最新数据的方法
2013/11/19 Javascript
js截取中英文字符串、标点符号无乱码示例解读
2014/04/17 Javascript
node.js中的fs.fsync方法使用说明
2014/12/15 Javascript
javascript实现获取浏览器版本、操作系统类型
2015/01/29 Javascript
简述Jquery与DOM对象
2015/07/10 Javascript
跟我学习javascript的隐式强制转换
2015/11/16 Javascript
jquery拖动层效果插件用法实例分析(附demo源码)
2016/04/28 Javascript
jQuery+ajax+asp.net获取Json值的方法
2016/06/08 Javascript
Bootstrap中的fileinput 多图片上传及编辑功能
2016/09/05 Javascript
JavaScript实现图片无缝滚动效果
2017/07/07 Javascript
js判断输入框不能为空格或null值的实现方法
2018/03/02 Javascript
JavaScript继承与多继承实例分析
2018/05/26 Javascript
React和Vue中监听变量变化的方法
2018/11/14 Javascript
JavaScript的Proxy可以做哪些有意思的事儿
2019/06/15 Javascript
vue点击页面空白处实现保存功能
2019/11/06 Javascript
小程序实现tab标签页
2020/11/16 Javascript
python中使用pyhook实现键盘监控的例子
2014/07/18 Python
python实现调用其他python脚本的方法
2014/10/05 Python
Python编程之黑板上排列组合,你舍得解开吗
2017/10/30 Python
Scrapy基于selenium结合爬取淘宝的实例讲解
2018/06/13 Python
python抓取京东小米8手机配置信息
2018/11/13 Python
Python3之字节串bytes与字节数组bytearray的使用详解
2019/08/27 Python
pytorch 实现张量tensor,图片,CPU,GPU,数组等的转换
2020/01/13 Python
Python内置异常类型全面汇总
2020/05/28 Python
Python使用xlrd实现读取合并单元格
2020/07/09 Python
pytorch学习教程之自定义数据集
2020/11/10 Python
BCBG官网:BCBGMAXAZRIA
2017/12/29 全球购物
主题党日活动总结
2014/07/08 职场文书
财会专业大学生求职信
2014/09/26 职场文书