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

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

创新互联服务项目包括关岭网站建设、关岭网站制作、关岭网页制作以及关岭网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，关岭网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到关岭省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

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

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

因为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>

相关免费学习推荐：JavaScript（视频）

当前文章：如何做到刷新vue.js改变数据
标题URL：https://www.cdcxhl.com/article38/cjcosp.html

成都网站建设公司_创新互联，为您提供ChatGPT、关键词优化、商城网站、软件开发、网站导航、营销型网站建设

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联