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 相关文章推荐
写的htc的数据表格
Jan 20 Javascript
javascript实现轮显新闻标题链接
Aug 13 Javascript
JS中的public和private对象,即static修饰符
Jan 18 Javascript
javascript 三种方法实现获得和设置以及移除元素属性
Mar 20 Javascript
简单实用jquery版三级联动select示例
Jul 04 Javascript
文本域中换行符的替换示例
Mar 04 Javascript
Node.js Sequelize如何实现数据库的读写分离
Oct 23 Javascript
Angular实现点击按钮后在上方显示输入内容的方法
Dec 27 Javascript
vue中实现在外部调用methods的方法(推荐)
Feb 08 Javascript
使用proxy实现一个更优雅的vue【推荐】
Jun 19 Javascript
Angular 2使用路由自定义弹出组件toast操作示例
May 10 Javascript
vue 取出v-for循环中的index值实例
Nov 09 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
phpMyAdmin 安装配置方法和问题解决
2009/06/08 PHP
php计算税后工资的方法
2015/07/28 PHP
PHP中类与对象功能、用法实例解读
2020/03/27 PHP
javascript 面向对象编程 function也是类
2009/09/17 Javascript
jquery随机展示头像代码
2011/12/21 Javascript
Extjs中TabPane如何嵌套在其他网页中实现思路及代码
2013/01/27 Javascript
select、radio表单回显功能实现避免使用jquery载入赋值
2013/06/08 Javascript
JS的document.all函数使用示例
2013/12/30 Javascript
node.js中的fs.lchownSync方法使用说明
2014/12/16 Javascript
Javascript中数组sort和reverse用法分析
2014/12/30 Javascript
NodeJS学习笔记之Connect中间件模块(一)
2015/01/27 NodeJs
利用jQuery实现CheckBox全选/全不选/反选的简单代码
2016/05/31 Javascript
jQuery Mobile漏洞会有跨站脚本攻击风险
2017/02/12 Javascript
用纯Node.JS弹出Windows系统消息提示框实例(MessageBox)
2017/05/17 Javascript
JavaScript实现的超简单计算器功能示例
2017/12/23 Javascript
在Vue中用canvas实现二维码和图片合成海报的方法
2019/06/10 Javascript
详解小程序云开发攻略(解决最棘手的问题)
2019/09/30 Javascript
详解Vue中Axios封装API接口的思路及方法
2020/10/10 Javascript
利用js canvas实现五子棋游戏
2020/10/11 Javascript
Python中的exec、eval使用实例
2014/09/23 Python
Python的Django框架中的数据过滤功能
2015/07/17 Python
python web基础之加载静态文件实例
2018/03/20 Python
Python多线程同步---文件读写控制方法
2019/02/12 Python
python 基于dlib库的人脸检测的实现
2019/11/08 Python
Python测试Kafka集群(pykafka)实例
2019/12/23 Python
python requests库的使用
2021/01/06 Python
详解如何通过H5(浏览器/WebView/其他)唤起本地app
2017/12/11 HTML / CSS
美国电视购物:QVC
2017/02/06 全球购物
Laura Mercier官网:彩妆大师罗拉玛斯亚的化妆品牌
2018/01/04 全球购物
Boom手表官网:瑞典手表品牌,设计你的手表
2019/03/11 全球购物
工厂会计员职责
2014/02/06 职场文书
军校大学生个人的自我评价
2014/02/17 职场文书
财产公证书样本
2014/04/04 职场文书
十佳文明家庭事迹
2014/05/25 职场文书
学校党的群众路线教育实践活动总结报告
2014/07/03 职场文书
2014年房地产销售工作总结
2014/12/01 职场文书