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刷新修改页面中数据的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
vue单页应用在页面刷新时保留状态数据的方法
在Vue单页应用中,如果在某一个具体路由的具体页面下点击刷新,那么刷新后,页面的状态信息可能就会丢失掉.这时候应该怎么处理呢?如果你也有这个疑惑,这篇文章或许能够帮助到你 一.问题 现在产品上有个需求:单页应用走到某个具体的页面,然后点击刷新后,刷新的页面要与刷新前的页面要保持一致. 这时候就需要我们保存刷新之前页面的状态. 二.一种解决方案 在这个Vue单页应用中,王二是用Vuex作为状态管理的,一开始王二的思路是将Vuex里的数据同步更新到localStorage里. 即:一改变vuex里的
-
解决vue单页使用keep-alive页面返回不刷新的问题
使用vue单页开发项目时遇到一个很恶心的问题:在列表页点击一条数据进入详情页,按返回键返回列表页时页面刷新了,用户体验非常差啊!!!查阅了一下相关问题,使用<keep-alive>解决这个问题,下面是我的使用心得. <keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM. 首先在App.vue页面上有下面一段代码,我们都知道这是页面渲染的地方 <router-view></router-view> 把这段代码改成
-
关于页面刷新vuex数据消失问题解决方案
VBox持续进行中,哀家苦啊,有没有谁给个star. vuex是vue用于数据存储的,和redux充当同样的角色. 最近在VBox开发的时候遇到的问题,页面刷新或者关闭浏览器再次打开的时候数据归零.这是头疼的问题. 网上搜,大家的方案都是把数据转移到 localStorage或者其他持久化存储(例如indexDB). 这倒是可以,我在设计之初因为匆忙,没有考虑周全,这下好,然不成每个 mutation都去存一下. 这个弄的我很不开心,周六在公司,本来就困的要死,又想不到合理的解决方案,昏昏沉沉睡
-
详解刷新页面vuex数据不消失和不跳转页面的解决
先说点什么 vuex和路由拦截这一块捣鼓的有一段时间了,总算是爬出来了,特地来分享一下,首先声明没有什么基础介绍,用的是登录状态存储sessionStorage的方法!!! 进入正题 刷新 刷新相当与重启项目,之前获取到的数据也只是通过store暂存起来,项目关闭时就不见了,这有些像电脑重启,存储在RAM的数据会消失.但是储存在sessionstorage.localstorage和cookie里的内容不会消失. Vuex 方法思路 首先得熟悉vuex,官网中介绍 Vuex 是一个专为 Vue.
-
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:
-
vue如何修改data中数据问题
目录 vue修改data中数据 vue中修改简单类型数据 vue中修改数组的方法 vue中修改对象的方法 关于删除 vue修改数据不生效,页面不刷新 vue中数据类型 vue数据侦听简易理解 数据更新后,页面不刷新的可能原因 vue修改data中数据 vue的data中保存一些数据,用于页面的渲染.有的时候,当我们手动对data中的数据修改时,vue却监听不到这些数据的变化,导致页面没有触发新一轮的更新. 注意:出现以上问题的原因在于,没有通过vue提供的方法对保存在data中的数据进行修改.强
-
Vue刷新后页面数据丢失问题的解决过程
目录 一.为什么刷新后数据会丢失 二.解决思路 三.解决方法 四.总结 总结 一.为什么刷新后数据会丢失 vuex存储的数据只是在页面中,相当于全局变量,页面刷新的时候vuex里的数据会重新初始化,导致数据丢失.因为vuex里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例,vuex里面的数据就会被重新赋值. 二.解决思路 办法一:将vuex中的数据直接保存到浏览器缓存中(sessionStorage.localStorage.cookie) 办法二:在页面刷新的时候再次请求远
-
vue axios 在页面切换时中断请求方法 ajax
如下所示: Vue.prototype.$ajax=axios; const CancelToken = axios.CancelToken; let cancel; let cancelAjaxText = '中断成功'; Vue.prototype.post = function(url,data,loading){ var ajax = Vue.prototype.$ajax({ method: 'post', url:url, data: data, cancelToken: new C
-
在vue里面设置全局变量或数据的方法
实例如下: const MyPlugin = { // install方法是必需的 // // 包含两个参数:Vue 构造器,一个可选的选项对象 install(Vue, options) { Vue.prototype.test = "test" ; Vue.prototype.wechat = "my wechat!"; } }; export default MyPlugin 此方法可以单独起一个文件,在引入到需要的页面里面,就可以用vue实例取到相应数据,像
-
Vue实现用户自定义字段显示数据的方法
如下: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible&q
-
Android编程实现在自定义对话框中获取EditText中数据的方法
本文实例讲述了Android编程实现在自定义对话框中获取EditText中数据的方法.分享给大家供大家参考,具体如下: 在项目中忽然遇到这样的问题,需要自定义对话框,对话框需要有一个输入框,以便修改所选中的价格,然后点击确定之后,修改所显示的价格.遇到的最大的问题就是如何能够获取到自定义对话框当中edittext输入的数值,百度了很久,看到的答案都是如下: //得到自定义对话框 final View DialogView = a .inflate ( R.layout.loand, null);
-
jQuery访问json文件中数据的方法示例
本文实例讲述了jQuery访问json文件中数据的方法.分享给大家供大家参考,具体如下: 有时候我们可能需要用到json文件存储数据,然后通过前台语言直接进行访问. 首先是json文件: { "管道": [ { "ElementId": "标识号", "GISID": "GISID", "Label": "编号", "StartNodeID":&q
-
TP3.2.3框架使用CKeditor编辑器在页面中上传图片的方法分析
本文实例讲述了TP3.2.3框架使用CKeditor编辑器在页面中上传图片的方法.分享给大家供大家参考,具体如下: 最近项目里要添加编辑器,以为CKeditor比较出名,所以研究了一下... 1.下载编辑器什么的不用说了 2.修改config配置文件 config.image_previewText=' '; config.filebrowserImageUploadUrl = 'uploadFiles'; 添加这两行代码,上面的是去除预览中的一堆没有用的东西,下面的是上传文件的方法名, 注意:
随机推荐
- jQuery 判断是否包含在数组中Array[]的方法
- 浅谈防火墙对FTP的影响及故障排除分析
- Java定时器问题实例解析
- 理解iOS多线程应用的开发以及线程的创建方法
- 基于js 本地存储(详解)
- Laravel中encrypt和decrypt的实现方法
- 浅谈lumen的自定义依赖注入
- python实现多线程的两种方式
- 通过数据库向Django模型添加字段的示例
- 浅谈PHP中类和对象的相关函数
- jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】
- 为jQuery增加join方法的实现代码
- 纯js和css实现渐变色包括静态渐变和动态渐变
- java抓取鼠标事件和鼠标滚轮事件示例
- IIS下PHP运行环境搭建与网页服务器故障排查方法
- 巧妙启用Windows 2003的远程桌面功能
- 求斐波那契(Fibonacci)数列通项的七种实现方法
- 商业连锁VPN解决方案
- 浅谈Angular 中何时取消订阅
- php数组遍历类与用法示例