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 相关文章推荐
ASP SQL防注入的方法
Dec 25 Javascript
用apply让javascript函数仅执行一次的代码
Jun 27 Javascript
js函数内变量的作用域分析
Jan 12 Javascript
js获得当前系统日期时间的方法
May 06 Javascript
JS模拟实现方法重载示例
Aug 03 Javascript
基于JS实现移动端向左滑动出现删除按钮功能
Feb 22 Javascript
AngularJS集合数据遍历显示的实例
Dec 27 Javascript
vue中动态绑定表单元素的属性方法
Feb 23 Javascript
vue-cli 使用axios的操作方法及整合axios的多种方法
Sep 12 Javascript
vue.js中导出Excel表格的案例分析
Jun 11 Javascript
基于Vue sessionStorage实现保留搜索框搜索内容
Jun 01 Javascript
微信小程序实现多图上传
Jun 19 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绘制圆形的方法
2015/01/24 PHP
PHP 数据结构队列(SplQueue)和优先队列(SplPriorityQueue)简单使用实例
2015/05/12 PHP
Symfony2实现在doctrine中内置数据的方法
2016/02/05 PHP
thinkphp整合微信支付代码分享
2016/11/24 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式二图文详解
2019/04/09 PHP
PHP从零开始打造自己的MVC框架之类的自动加载实现方法详解
2019/06/03 PHP
浅谈laravel orm 中的一对多关系 hasMany
2019/10/21 PHP
PHP执行普通shell命令流程解析
2020/08/24 PHP
基于jquery的可多选的下拉列表框
2012/07/20 Javascript
页面使用密码保护代码
2013/04/10 Javascript
JS.getTextContent(element,preformatted)使用介绍
2013/09/21 Javascript
jQuery插件开发详细教程
2014/06/06 Javascript
一款简单的jQuery图片标注效果附源码下载
2016/03/22 Javascript
Angular ng-class详解及实例代码
2016/09/19 Javascript
Angular4学习笔记之准备和环境搭建项目
2017/08/01 Javascript
jquery实现图片跟随鼠标的实例
2017/10/17 jQuery
angularjs实现柱状图动态加载的示例
2017/12/11 Javascript
JavaScript实现多重继承的方法分析
2018/01/09 Javascript
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
2018/03/13 Javascript
vuejs实现折叠面板展开收缩动画效果
2018/09/06 Javascript
VUE 配置vue-devtools调试工具及安装方法
2018/09/30 Javascript
浅谈JS中this在各个场景下的指向
2019/08/14 Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
2020/01/02 Javascript
[01:02]2014 DOTA2国际邀请赛中国区预选赛 现场抢先看
2014/05/22 DOTA
[03:36]DOTA2完美大师赛coL战队趣味视频——我演你猜
2017/11/23 DOTA
python爬虫常用的模块分析
2014/08/29 Python
Python读写及备份oracle数据库操作示例
2018/05/17 Python
Python递归函数 二分查找算法实现解析
2019/08/12 Python
关于Python中的向量相加和numpy中的向量相加效率对比
2019/08/26 Python
keras中的loss、optimizer、metrics用法
2020/06/15 Python
学期研究性学习个人的自我评价
2014/01/09 职场文书
中秋晚会策划方案
2014/06/12 职场文书
地理科学专业自荐信
2014/09/01 职场文书
2014年人力资源工作总结
2014/11/19 职场文书
2015年数学教研组工作总结
2015/05/23 职场文书
一篇文章弄清楚Ajax请求的五个步骤
2022/03/17 Javascript