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 相关文章推荐
My Desktop :) 桌面式代码
Dec 29 Javascript
jQuery ajax(复习)—Baidu ajax request分离版
Jan 24 Javascript
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
Jan 27 Javascript
用JavaScript获取DOM元素位置和尺寸大小的方法
Apr 12 Javascript
Jquery实现搜索框提示功能示例代码
Aug 13 Javascript
js通过classname来获取元素的方法
Nov 24 Javascript
详解node-ccap模块生成captcha验证码
Jul 01 Javascript
2种简单的js倒计时方式
Oct 20 Javascript
vue综合组件间的通信详解
Nov 06 Javascript
Angular浏览器插件Batarang介绍及使用
Feb 07 Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
Aug 24 Javascript
vue打包使用Nginx代理解决跨域问题
Aug 27 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
一个可以删除字符串中HTML标记的PHP函数
2006/10/09 PHP
php !function_exists(&quot;T7FC56270E7A70FA81A5935B72EACBE29&quot;))代码解密
2011/01/07 PHP
php中通过正则表达式下载内容中的远程图片的函数代码
2012/01/10 PHP
Discuz批量替换帖子内容的方法(使用SQL更新数据库)
2014/06/23 PHP
PHP文件操作方法汇总
2015/07/01 PHP
windows8.1下Apache+Php+MySQL配置步骤
2015/10/30 PHP
php图形jpgraph操作实例分析
2017/02/22 PHP
jQuery中需要注意的细节问题小结
2011/12/06 Javascript
jquery插件制作 提示框插件实现代码
2012/08/17 Javascript
Javascript aop(面向切面编程)之around(环绕)分析
2015/05/01 Javascript
简述JavaScript对传统文档对象模型的支持
2015/06/16 Javascript
谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
2015/10/01 Javascript
浅析javascript中的事件代理
2015/11/06 Javascript
JS遍历数组及打印数组实例分析
2016/01/21 Javascript
浅谈Sticky组件的改进实现
2016/03/22 Javascript
javascript中数组和字符串的方法对比
2016/07/20 Javascript
分享JS数组求和与求最大值的方法
2016/08/11 Javascript
jQuery 移动端拖拽(模块化开发,触摸事件,webpack)
2016/10/28 Javascript
微信小程序 页面之间传参实例详解
2017/01/13 Javascript
分享一道关于闭包、bind和this的面试题
2017/02/20 Javascript
js实现三级联动效果(简单易懂)
2017/03/27 Javascript
javaScript 连接打印机,打印小票的实例
2017/12/29 Javascript
安装Node.js并启动本地服务的操作教程
2018/05/12 Javascript
Nodejs实现用户注册功能
2019/04/14 NodeJs
koa2 从入门到精通(小结)
2019/07/23 Javascript
js闭包和垃圾回收机制示例详解
2021/03/01 Javascript
[02:28]DOTA2英雄基础教程 狼人
2013/12/23 DOTA
Python内置方法实现字符串的秘钥加解密(推荐)
2019/12/09 Python
Python利用Faiss库实现ANN近邻搜索的方法详解
2020/08/03 Python
弄清Pytorch显存的分配机制
2020/12/10 Python
突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述
2013/01/31 HTML / CSS
带你认识HTML5中的WebSocket
2015/05/22 HTML / CSS
机关干部四风问题自查报告及整改措施
2014/10/26 职场文书
公司财务部岗位职责
2015/04/14 职场文书
开会迟到检讨书范文
2015/05/06 职场文书
禁毒主题班会教案
2015/08/14 职场文书