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 相关文章推荐
动态改变div的z-index属性的简单实例
Aug 08 Javascript
JavaScript中setInterval的用法总结
Nov 20 Javascript
jQuery实现的手机发送验证码倒计时效果代码分享
Aug 24 Javascript
Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
Aug 05 Javascript
JavaScript SHA-256加密算法详细代码
Oct 06 Javascript
Vue.js第二天学习笔记(vue-router)
Dec 01 Javascript
webpack将js打包后的map文件详解
Feb 22 Javascript
vue.js 实现点击展开收起动画效果
Jul 07 Javascript
微信小程序利用swiper+css实现购物车商品删除功能
Mar 06 Javascript
vue实现后台管理权限系统及顶栏三级菜单显示功能
Jun 19 Javascript
node.js Promise对象的使用方法实例分析
Dec 26 Javascript
js this 绑定机制深入详解
Apr 30 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 5.0对象模型深度探索之属性和方法
2008/03/27 PHP
防止用户利用PHP代码DOS造成用光网络带宽
2011/03/01 PHP
php foreach循环中使用引用的问题
2013/11/06 PHP
php截取中文字符串函数实例
2015/02/23 PHP
Yii框架防止sql注入,xss攻击与csrf攻击的方法
2016/10/18 PHP
搭建自己的PHP MVC框架详解
2017/08/16 PHP
JavaScript 数组的 uniq 方法
2008/01/23 Javascript
一些实用的jQuery代码片段收集
2011/07/12 Javascript
简单实用的反馈表单无刷新提交带验证
2013/11/15 Javascript
Javascript实现获取窗口的大小和位置代码分享
2014/12/04 Javascript
javascript事件模型介绍
2016/05/31 Javascript
JS定时器使用,定时定点,固定时刻,循环执行详解
2016/05/31 Javascript
easyui 中的datagrid跨页勾选问题的实现方法
2017/01/18 Javascript
详解vue 兼容IE报错解决方案
2018/12/29 Javascript
vuex实现像调用模板方法一样调用Mutations方法
2019/11/06 Javascript
JS实现电脑虚拟键盘的操作
2020/06/24 Javascript
[00:15]天涯墨客终极技能展示
2018/08/25 DOTA
使用python BeautifulSoup库抓取58手机维修信息
2013/11/21 Python
python中实现php的var_dump函数功能
2015/01/21 Python
举例详解Python中yield生成器的用法
2015/08/05 Python
基于python socketserver框架全面解析
2017/09/21 Python
python高阶函数map()和reduce()实例解析
2020/03/16 Python
Python logging模块原理解析及应用
2020/08/13 Python
Django自定义YamlField实现过程解析
2020/11/11 Python
用python制作个音乐下载器
2021/01/30 Python
CSS3实现的闪烁跳跃进度条示例(附源码)
2013/08/19 HTML / CSS
UGG英国官方网站:UGG UK
2018/02/08 全球购物
舒适的豪华鞋:Taryn Rose
2018/05/03 全球购物
英国旅行箱包和行李箱购物网站:Travel Luggage & Cabin Bags
2019/08/26 全球购物
周生生珠宝香港官网:Chow Sang Sang(香港及海外配送)
2019/09/05 全球购物
台湾三立电视电商平台:电电购
2019/09/09 全球购物
Perfume’s Club中文官网:西班牙美妆在线零售品牌
2020/08/24 全球购物
销售工作岗位职责
2013/12/24 职场文书
打架检讨书范文
2015/01/27 职场文书
2015年文明创建工作总结
2015/04/30 职场文书
javascript实现计算器功能详解流程
2021/11/01 Javascript