• 技术文章 >web前端 >Vue.js

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

    coldplay.xixicoldplay.xixi2020-11-18 14:19:10原创46

    刷新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改变数据的详细内容,更多请关注php中文网其它相关文章!

    本文原创发布php中文网,转载请注明出处,感谢您的尊重!
    专题推荐:vue.js 改变数据
    上一篇:vue.js中怎么添加favicon图标 下一篇:vue如何注释
    第14期线上培训班

    相关文章推荐

    • RPM方式安装MYSQL5.5,改变数据目录出现错误解决_MySQL• 改变数据库实例名称

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网