vue 修改 data 数据问题并实时显示的方法


Posted in Javascript onAugust 27, 2018

首先,定义一个变量:

(以下以本人写的为例)

首先定义一个变量:

vue 修改 data 数据问题并实时显示的方法

然后,给变量赋值:

vue 修改 data 数据问题并实时显示的方法

如果想要修改数据,主要代码如下:

vue 修改 data 数据问题并实时显示的方法

然后界面上要记得绑定数据id:

vue 修改 data 数据问题并实时显示的方法

就Ok了。

拓展知识:Vue刷新修改页面中的数据方法

因为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 修改 data 数据问题并实时显示的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript call和apply方法
Nov 24 Javascript
JavaScript中“过于”犀利地for/in循环使用示例
Oct 22 Javascript
js 操作select与option(示例讲解)
Dec 20 Javascript
Javascript获取表单名称(name)的方法
Apr 02 Javascript
AngularJS延迟加载html template
Jul 27 Javascript
手机Web APP如何实现分享多平台功能
Aug 19 Javascript
详解VueJs异步动态加载块
Mar 09 Javascript
使用node.js对音视频文件加密的实例代码
Aug 30 Javascript
React styled-components设置组件属性的方法
Aug 07 Javascript
Vue.js组件高级特性实例详解
Dec 24 Javascript
JS实现的检验身份证格式并输出出生日期,年龄,性别,出生地示例
May 17 Javascript
echarts实现晶体球面投影的实例教程
Oct 10 Javascript
Node.js连接Sql Server 2008及数据层封装详解
Aug 27 #Javascript
解决vue中修改export default中脚本报一大堆错的问题
Aug 27 #Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
Aug 27 #Javascript
JS常见构造模式实例对比分析
Aug 27 #Javascript
Vue.js图片预览插件使用详解
Aug 27 #Javascript
JavaScript中创建原子的方法总结
Aug 26 #Javascript
解决vue.js 数据渲染成功仍报错的问题
Aug 25 #Javascript
You might like
Php做的端口嗅探器--可以指定网站和端口
2006/10/09 PHP
linux下删除7天前日志的代码(php+shell)
2011/01/02 PHP
php中使用Akismet防止垃圾评论的代码
2011/06/10 PHP
基于xcache的配置与使用详解
2013/06/18 PHP
Paypal实现循环扣款(订阅)功能
2017/03/23 PHP
javascript 模式设计之工厂模式详细说明
2010/05/10 Javascript
鼠标事件延时切换插件
2011/03/12 Javascript
javascript分页代码实例分享(js分页)
2013/12/13 Javascript
Javascript加载速度慢的解决方案
2014/03/11 Javascript
详解前端构建工具gulpjs的使用介绍及技巧
2017/01/19 Javascript
基于vue2框架的机器人自动回复mini-project实例代码
2017/06/13 Javascript
webpack写jquery插件的环境配置
2017/12/21 jQuery
微信小程序视图容器(swiper)组件创建轮播图
2020/06/19 Javascript
在JS循环中使用async/await的方法
2018/10/12 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
2019/06/06 jQuery
JS实现简易计算器
2020/02/14 Javascript
解决VUE-Router 同一页面第二次进入不刷新的问题
2020/07/22 Javascript
Python中if __name__ == &quot;__main__&quot;详细解释
2014/10/21 Python
在Django的session中使用User对象的方法
2015/07/23 Python
浅谈function(函数)中的动态参数
2017/04/30 Python
解决python3 Pycharm上连接数据库时报错的问题
2018/12/03 Python
python爬虫selenium和phantomJs使用方法解析
2019/08/08 Python
Python使用turtle库绘制小猪佩奇(实例代码)
2020/01/16 Python
HTML5的语法变化介绍
2013/08/13 HTML / CSS
澳大利亚首屈一指的鞋类品牌:Tony Bianco
2018/03/13 全球购物
澳大利亚宠物食品和药物在线:Jumbo Pets
2018/03/24 全球购物
可口可乐唇膏:Lip Smackers
2019/08/27 全球购物
军训感想500字
2014/02/20 职场文书
高中军训感想300字
2014/03/04 职场文书
2014市国税局对照检查材料思想汇报
2014/09/23 职场文书
秦始皇兵马俑导游词
2015/02/02 职场文书
财务出纳岗位职责
2015/03/31 职场文书
幼儿园小朋友毕业感言
2015/07/30 职场文书
2019年感恩励志演讲稿(收藏备用)
2019/09/11 职场文书
HTML5页面音频自动播放的实现方式
2021/06/21 HTML / CSS
python之PySide2安装使用及QT Designer UI设计案例教程
2021/07/26 Python