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 相关文章推荐
jquery JSON的解析方式
Jul 25 Javascript
ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
Feb 03 Javascript
js与jquery获取父级元素,子级元素,兄弟元素的实现方法
Jan 09 Javascript
让checkbox不选中即将选中的checkbox不选中
Jul 11 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
Apr 24 Javascript
JS函数的定义与调用方法推荐
May 12 Javascript
Bootstrap表单布局样式代码
May 31 Javascript
浅谈JSON.stringify()和JOSN.parse()方法的不同
Aug 29 Javascript
微信小程序自定义组件之可清除的input组件
Jul 17 Javascript
VUE DEMO之模拟登录个人中心页面之间数据传值实例
Oct 31 Javascript
HTML+JS实现“代码雨”效果源码(黑客帝国文字下落效果)
Mar 17 Javascript
js实现点击按钮随机生成背景颜色
Sep 05 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中使用GD库创建圆形饼图的例子
2014/11/19 PHP
thinkphp3.0输出重复两次的解决方法
2014/12/19 PHP
smarty内置函数section的用法
2015/01/22 PHP
Laravel学习教程之request validation的编写
2017/10/25 PHP
php解压缩zip和rar压缩包文件的方法
2019/07/10 PHP
js 方法实现返回多个数据的代码
2009/04/30 Javascript
javascript xml为数据源的下拉框控件
2009/07/07 Javascript
JQuery通过Ajax提交表单并返回结果
2011/07/31 Javascript
javascript级联下拉列表实例代码(自写)
2013/05/10 Javascript
js日期相关函数总结分享
2013/10/15 Javascript
js 处理数组重复元素示例代码
2013/12/27 Javascript
JavaScript调用ajax获取文本文件内容实现代码
2014/03/28 Javascript
javascript与有限状态机详解
2014/05/08 Javascript
jQuery前端分页示例分享
2015/02/10 Javascript
基于jQuery实现多层次的手风琴效果附源码
2015/09/21 Javascript
asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
2016/05/05 Javascript
深入理解jQuery()方法的构建原理
2016/12/05 Javascript
JS组件系列之MVVM组件构建自己的Vue组件
2017/04/28 Javascript
详解在AngularJS的controller外部直接获取$scope
2017/06/02 Javascript
ionic中的$ionicPlatform.ready事件中的通用设置
2017/06/11 Javascript
vue+springboot前后端分离实现单点登录跨域问题解决方法
2018/01/30 Javascript
async/await优雅的错误处理方法总结
2019/01/30 Javascript
js array数组对象操作方法汇总
2019/03/18 Javascript
Python版的文曲星猜数字游戏代码
2013/09/02 Python
Python urlopen()函数 示例分享
2014/06/12 Python
python通过floor函数舍弃小数位的方法
2015/03/17 Python
matplotlib给子图添加图例的方法
2018/08/03 Python
用python 实现在不确定行数情况下多行输入方法
2019/01/28 Python
django-rest-swagger对API接口注释的方法
2019/08/29 Python
用python求一重积分和二重积分的例子
2019/12/06 Python
Python面向对象封装操作案例详解 II
2020/01/02 Python
python 5个实用的技巧
2020/09/27 Python
Python爬虫之Selenium设置元素等待的方法
2020/12/04 Python
财务管理个人自荐书范文
2013/11/24 职场文书
房地产融资计划书
2014/01/10 职场文书
会计专业大学生职业生涯规划书
2014/02/11 职场文书