如何做到刷新vue.js改变数据

刷新vue.js改变数据的方法:用【Vue.set()】函数来进行修改,函数格式为【Vue.set(data,’para’,’value’)】,其中data为Vue创建时传输的data对象名。

如何做到刷新vue.js改变数据

本教程操作环境:windows10系统、vue2.9,本文适用于所有品牌的电脑。

【相关文章推荐:vue.js】

刷新vue.js改变数据的方法:

因为Vue对象一旦生成之后,如果只是修改Vue对象中的数据,在页面上是不会自动更新的,得用Vue.set()函数来进行修改,函数格式为Vue.set(data,’para’,’value’),其中data为Vue创建时传输的data对象名,后面两个参数分别是data对象中的变量名称与值

立即学习“前端免费学习笔记(深入)”;

页面初始化代码:

    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        })    })

登录后复制

需要用js对Vue模板中的变量进行修改的代码:

    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));    }  

登录后复制

相关免费学习推荐:JavaScript(视频)

以上就是如何做到刷新vue.js改变数据的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3022023.html

(0)
上一篇 2025年3月13日 05:50:53
下一篇 2025年3月6日 05:39:09

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 命令行方式怎么安装vue.js

    命令行方式安装vue.js的方法:首先在cmd中执行【npm install -g cnpm –registry=镜像】命令;然后继续执行【cnmp install vue】命令即可。 由于国内使用npm速度很慢,所以这里使用淘…

    2025年3月13日
    200
  • vue.js有哪些ui框架?

    vue.js的ui框架有:Element、iview、vuetify、vue-strap、cube-ui、buefy、vue-beauty、at-ui、Vue-Blu、vue-storefront等等。 基于vue.js的ui框架 一、El…

    2025年3月13日 编程技术
    200
  • 5个好用的Vue.js库推荐

    下面vue.js栏目给大家分享5个好用的vue.js库。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 1.Click Off to Close 有的时候,我们需要在用户点击元素之外的时候触发一个事件。最常见的用例是当你想…

    2025年3月13日 编程技术
    200
  • vue.js中怎么引入组件

    vue.js中引入组件的方法:1、创建自定义组件的文件夹;2、在要添加的页中加入要引入的模块;3、在index.vue中引入模块;4、在index.vue页面引入组件即可。 具体步骤如下: (相关视频推荐:jquery视频教程) 1、首先在…

    2025年3月13日 编程技术
    200
  • vue.js页面间如何实现传值

    vue.js页面间实现传值的方法:1、使用query传值,代码为【query: { name: ‘jack’ }】;2、使用params传值,代码为【params: { usersitelist: ‘us…

    2025年3月13日
    200
  • vue.js怎么获取class

    vue.js获取class的方法:1、使用数据绑定,代码为【【创想鸟】】;2、动态绑定class,代码为【De】。 vue.js获取class的方法: 1、数据绑定 vue 指令以 v- 前缀标示,数据绑定的指令 v-bind:属性名, 简…

    2025年3月13日
    200
  • vue.js如何声明全局变量

    vue.js声明全局变量的方法:首先设置专用的的全局变量模块文件,模块里面定义一些变量初始状态;然后用export default暴露出去;最后在【main.js】里面使用【Vue.prototype】挂载到vue实例上面,引入该模块即可。…

    2025年3月13日
    200
  • 如何卸载vue.js

    卸载vue.js的方法:首先执行【npm uninstall vue-cli -g】命令进行卸载;然后执行【vue -V】命令查看是否卸载成功即可。如果要安装vue,则执行【npm install -g @vue/cli】命令。 卸载命令:…

    2025年3月13日
    200
  • vue.js的优点是什么

    vue.js的优点是:1、vue.js可以进行组件化开发;2、vue.js可以对数据进行双向绑定;3、vue.js编写的界面效果本身就是响应式的;4、vue.js使用路由不会刷新页面。 vue.js的优点: (学习视频分享:javascri…

    2025年3月13日
    200
  • vue.js有轮播图插件吗?

    vue.js有轮播图插件,例如vue-concise-slider,它是基于Swiper4、适用于Vue的轮播组件,支持服务端渲染和单页应用;vue-awesome-swiper配置简单,支持自适应/全屏+按钮+分页,同时兼容移动和PC端。…

    2025年3月13日
    200

发表回复

登录后才能评论