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

这篇文章给大家分享的是有关如何刷新vue.js改变数据的方法的内容。小编觉得挺实用的，因此分享给大家做个参考。一起跟随小编过来看看吧。

神池ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为创新互联公司的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：18980820575（备注：SSL证书合作）期待与您的合作！

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

刷新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>

感谢各位的阅读！关于如何刷新vue.js改变数据的方法就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到吧！

当前名称：如何刷新vue.js改变数据的方法
本文链接：https://www.cdcxhl.com/article32/gpchpc.html

成都网站建设公司_创新互联，为您提供App设计、自适应网站、响应式网站、用户体验、网站营销、外贸建站

广告

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