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 相关文章推荐
Prototype使用指南之ajax
Jan 10 Javascript
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
Dec 02 Javascript
JS去除右边逗号的简单方法
Jul 03 Javascript
js window.open弹出新的网页窗口
Jan 16 Javascript
JavaScript实现Iterator模式实例分析
Jun 09 Javascript
arguments对象验证函数的参数是否合法
Jun 26 Javascript
jQuery实现移动端滑块拖动选择数字效果
Dec 24 Javascript
使用Angular.js实现简单的购物车功能
Nov 21 Javascript
angular2 ng2 @input和@output理解及示例
Oct 10 Javascript
详解三种方式解决vue中v-html元素中标签样式
Nov 22 Javascript
微信小程序实现获取用户信息并存入数据库操作示例
May 07 Javascript
js实现简单的贪吃蛇游戏
Apr 23 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
JpGraph php柱状图使用介绍
2011/08/23 PHP
探讨PHP JSON中文乱码的解决方法详解
2013/06/06 PHP
PHP生成二维码的两个方法和实例
2014/07/01 PHP
详解PHP数组赋值方法
2015/11/07 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
详细解读php的命名空间(一)
2018/02/21 PHP
jquery插件 cluetip 关键词注释
2010/01/12 Javascript
Juqery Html(),append()等方法的Bug解决方法
2010/12/13 Javascript
javascript中检测变量的类型的代码
2010/12/28 Javascript
js 处理数组重复元素示例代码
2013/12/27 Javascript
轻松实现js选项卡切换效果
2016/09/24 Javascript
详解Javascript几种跨域方式总结
2017/02/27 Javascript
完美解决spring websocket自动断开连接再创建引发的问题
2017/03/02 Javascript
详解vue的diff算法原理
2018/05/20 Javascript
用原生 JS 实现 innerHTML 功能实例详解
2019/04/03 Javascript
layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)
2019/09/23 Javascript
Vue Object 的变化侦测实现代码
2020/04/15 Javascript
Postman参数化实现过程及原理解析
2020/08/13 Javascript
Openlayers显示地理位置坐标的方法
2020/09/28 Javascript
原生js拖拽功能制作滑动条实例代码
2021/02/05 Javascript
[03:31]DOTA2英雄基础教程 大地之灵
2013/12/17 DOTA
[43:03]完美世界DOTA2联赛PWL S2 PXG vs Magma 第二场 11.21
2020/11/24 DOTA
举例讲解Python的lambda语句声明匿名函数的用法
2016/07/01 Python
python append、extend与insert的区别
2016/10/13 Python
python爬取亚马逊书籍信息代码分享
2017/12/09 Python
Ubuntu18.04安装 PyCharm并使用 Anaconda 管理的Python环境
2020/04/08 Python
在django中查询获取数据,get, filter,all(),values()操作
2020/08/09 Python
vscode+PyQt5安装详解步骤
2020/08/12 Python
Python基于execjs运行js过程解析
2020/11/27 Python
pycharm实现猜数游戏
2020/12/07 Python
Nike意大利官网:Nike.com IT
2020/01/19 全球购物
孝敬父母的演讲稿
2014/05/14 职场文书
会员活动策划方案
2014/08/19 职场文书
MySQL5.7并行复制原理及实现
2021/06/03 MySQL
浅谈MySQL user权限表
2021/06/18 MySQL
如何使用注解方式实现 Redis 分布式锁
2022/07/23 Redis