Vue刷新修改页面中数据的方法


Posted in Javascript onSeptember 16, 2018

因为Vue对象一旦生成之后,如果只是修改Vue对象中的数据,在页面上是不会自动更新的,得用Vue.set()函数来进行修改,函数格式为Vue.set(data,'para','value'),其中data为Vue创建时传输的data对象名,后面两个参数分别是data对象中的变量名称与值

页面初始化代码:

<script type="text/javascript" charset="utf-8">
	mui.init();
	var data = {
		dx: 1400,
		wcyj: 0,
		jj: 0,
		tcbl: 0,
		tcje: 0,
		total: 0
	};
	$(document).ready(function() {
 
		var v = new Vue({
			el: '#result',
			data: data
		})
	})
</script>

需要用js对Vue模板中的变量进行修改的代码:

<script type="text/javascript">
	function calc() {
		$("#result").show();
		yj = $("#yeji").val();
		Vue.set(data, 'wcyj', yj);
		if(yj < 40000) {
			Vue.set(data, 'tcbl', 0.04);
			Vue.set(data, 'jj', 0);
		} else if(yj < 80000) {
			Vue.set(data, 'tcbl', 0.05);
			Vue.set(data, 'jj', 400);
		} else if(yj < 120000) {
			Vue.set(data, 'tcbl', 0.06);
			Vue.set(data, 'jj', 1000);
		} else {
			Vue.set(data, 'tcbl', 0.07);
			Vue.set(data, 'jj', 1500);
		}
		data.tcje = (yj * data.tcbl).toFixed(1);
		data.total = (parseFloat(data.tcje) + parseFloat(data.dx) + parseFloat(data.jj));
	}
 
</script>

以上这篇Vue刷新修改页面中数据的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 简单抽屉效果的实现代码
Mar 09 Javascript
圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现
Dec 27 Javascript
node.js操作mongoDB数据库示例分享
Nov 26 Javascript
jQuery焦点控制图层展示延迟隐藏的方法
Mar 09 Javascript
jquery实现倒计时功能
Dec 28 Javascript
Js实现简单的小球运动特效
Feb 18 Javascript
浅谈js内置对象Math的属性和方法(推荐)
Sep 19 Javascript
详解JavaScript跨域总结与解决办法
Oct 31 Javascript
vue2 前后端分离项目ajax跨域session问题解决方法
Apr 27 Javascript
vue实现单选和多选功能
Aug 11 Javascript
vue登录注册及token验证实现代码
Dec 14 Javascript
js中怎么判断两个字符串相等的实例
Jan 17 Javascript
Vue中使用vux配置代码详解
Sep 16 #Javascript
在vue中安装使用vux的教程详解
Sep 16 #Javascript
React 组件中的 bind(this)示例代码
Sep 16 #Javascript
Vue.set()动态的新增与修改数据,触发视图更新的方法
Sep 15 #Javascript
解决VUE中document.body.scrollTop为0的问题
Sep 15 #Javascript
Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法
Sep 15 #Javascript
vue 监听某个div垂直滚动条下拉到底部的方法
Sep 15 #Javascript
You might like
PHP脚本的10个技巧(8)
2006/10/09 PHP
PHP 文件上传功能实现代码
2009/06/24 PHP
本地机apache配置基于域名的虚拟主机详解
2013/08/10 PHP
PHP购物车类Cart.class.php定义与用法示例
2016/07/20 PHP
IE 缓存策略的BUG的解决方法
2007/07/21 Javascript
关于锚点跳转及jQuery下相关操作与插件
2012/10/01 Javascript
在jQuery中 关于json空对象筛选替换
2013/04/15 Javascript
jquery form 加载数据示例
2014/04/21 Javascript
JS实现网页表格自动变大缩小的方法
2015/03/09 Javascript
javaScript中with函数用法实例分析
2015/06/08 Javascript
JavaScript设置表单上传时文件个数的方法
2015/08/11 Javascript
详解基于Bootstrap+angular的一个豆瓣电影app
2017/06/26 Javascript
bootstrap里bootstrap动态加载下拉框的实例讲解
2018/08/10 Javascript
puppeteer实现html截图的示例代码
2019/01/10 Javascript
微信小程序基于Taro的分享图片功能实践详解
2019/07/12 Javascript
JS如何把字符串转换成json
2020/02/21 Javascript
深入解读VUE中的异步渲染的实现
2020/06/19 Javascript
vue实现广告栏上下滚动效果
2020/11/26 Vue.js
Python程序员开发中常犯的10个错误
2014/07/07 Python
用uWSGI和Nginx部署Flask项目的方法示例
2019/05/05 Python
python日期相关操作实例小结
2019/06/24 Python
Pycharm小白级简单使用教程
2020/01/08 Python
python3.6连接mysql数据库及增删改查操作详解
2020/02/10 Python
python实现word文档批量转成自定义格式的excel文档的思路及实例代码
2020/02/21 Python
Python气泡提示与标签的实现
2020/04/01 Python
Python如何基于Tesseract实现识别文字功能
2020/06/05 Python
CSS3实现彩色进度条动画的示例
2020/10/29 HTML / CSS
Python文件操作的面试题
2013/06/22 面试题
关于打架的检讨书
2014/01/17 职场文书
办公室秘书岗位职责范本
2014/02/11 职场文书
食品安全承诺书
2014/05/22 职场文书
报表员工作失误检讨书范文
2014/09/19 职场文书
教师党员整改措施
2014/10/24 职场文书
2016党员学习作风建设心得体会
2016/01/21 职场文书
win11系统中dhcp服务异常什么意思? Win11 DHCP服务异常修复方法
2022/04/08 数码科技
python小型的音频操作库mp3Play
2022/04/24 Python