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 相关文章推荐
关于viewport,Ext.panel和Ext.form.panel的关系
May 07 Javascript
JS实现局部选择打印和局部不选择打印
Apr 03 Javascript
js创建表单元素并使用submit进行提交
Aug 14 Javascript
js文件包含的几种方式介绍
Sep 28 Javascript
教你如何使用firebug调试功能了解javascript闭包和this
Mar 04 Javascript
jQuery Mobile页面返回不需要重新get
Apr 26 Javascript
多种jQuery绑定事件的实现方式
Jun 13 Javascript
JS对象深度克隆实例分析
Mar 16 Javascript
浅谈Angular 的变化检测的方法
Mar 01 Javascript
看看“疫苗查询”小程序有温度的代码
Jul 31 Javascript
Vue.js实现表格渲染的方法
Sep 07 Javascript
jQuery实现消息弹出框效果
Dec 10 jQuery
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密码生成类实例
2014/09/24 PHP
PHP编写简单的App接口
2016/08/28 PHP
[原创]提供复制本站内容时出现,该文章转自脚本之家等字样的js代码
2007/03/27 Javascript
如何判断Javascript对象是否存在的简单实例
2016/05/18 Javascript
深入了解JavaScript的逻辑运算符(与、或)
2016/12/20 Javascript
js实现数字递增特效【仿支付宝我的财富】
2017/05/05 Javascript
JS 中使用Promise 实现红绿灯实例代码(demo)
2017/10/20 Javascript
Angular封装搜索框组件操作示例
2019/04/25 Javascript
[02:19]2014DOTA2国际邀请赛 专访820少年们一起去追梦吧
2014/07/14 DOTA
[00:32]2018DOTA2亚洲邀请赛Mineski出场
2018/04/04 DOTA
[57:41]Secret vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python 操作MySQL详解及实例
2017/04/30 Python
利用PyInstaller将python程序.py转为.exe的方法详解
2017/05/03 Python
Python获取当前页面内所有链接的四种方法对比分析
2017/08/19 Python
python的unittest测试类代码实例
2017/12/07 Python
详解Python使用tensorflow入门指南
2018/02/09 Python
VScode编写第一个Python程序HelloWorld步骤
2018/04/06 Python
Django实现分页功能
2018/07/02 Python
python pandas消除空值和空格以及 Nan数据替换方法
2018/10/30 Python
Python除法之传统除法、Floor除法及真除法实例详解
2019/05/23 Python
基于python框架Scrapy爬取自己的博客内容过程详解
2019/08/05 Python
python数据分析:关键字提取方式
2020/02/24 Python
使用CSS3制作饼状旋转载入效果的实例
2015/06/23 HTML / CSS
CSS 说明横向进度条最后显示文字的实现代码
2020/11/10 HTML / CSS
PHP如何对用户密码进行加密
2014/07/31 面试题
计算机应用毕业生自荐信
2013/10/23 职场文书
查环查孕证明
2014/01/10 职场文书
宝宝周岁宴答谢词
2014/01/26 职场文书
村官工作鉴定评语
2014/01/27 职场文书
好媳妇事迹材料
2014/12/24 职场文书
2015年毕业生个人自荐书
2015/03/24 职场文书
人民检察院起诉书
2015/05/20 职场文书
微信小程序用户授权最佳实践指南
2021/05/08 Javascript
MongoDB 常用的crud操作语句
2021/06/20 MongoDB
2021好看的国漫排行榜前十名 《完美世界》上榜,《元龙》排名第一
2022/03/18 国漫
MySQL解决Navicat设置默认字符串时的报错问题
2022/06/16 MySQL