How to refresh vue.js to change data-Vue.js-php.cn

How to refresh vue.js to change data

coldplay.xixi

Release： 2020-11-30 13:36:06

Original

1649 people have browsed it

How to refresh vue.js to change data: Use the [Vue.set()] function to make modifications. The function format is [Vue.set(data,'para','value')], where data It is the name of the data object transmitted when Vue is created.

How to refresh vue.js to change data

The operating environment of this tutorial: windows10 system, vue2.9, this article is applicable to all brands of computers.

【Recommended related articles: vue.js】

How to refresh vue.js to change data:

Because once the Vue object is generated, if you only modify the data in the Vue object, it will not be automatically updated on the page. You must use the Vue.set() function to make modifications. The function format is Vue.set(data ,'para','value'), where data is the data object name transmitted when Vue is created, and the next two parameters are the variable name and value in the data object.

Page initialization code:

<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: &#39;#result&#39;,
            data: data
        })
    })
</script>

Copy after login

Code that needs to use js to modify the variables in the Vue template:

<script type="text/javascript">
    function calc() {
        $("#result").show();
        yj = $("#yeji").val();
        Vue.set(data, &#39;wcyj&#39;, yj);
        if(yj < 40000) {
            Vue.set(data, &#39;tcbl&#39;, 0.04);
            Vue.set(data, &#39;jj&#39;, 0);
        } else if(yj < 80000) {
            Vue.set(data, &#39;tcbl&#39;, 0.05);
            Vue.set(data, &#39;jj&#39;, 400);
        } else if(yj < 120000) {
            Vue.set(data, &#39;tcbl&#39;, 0.06);
            Vue.set(data, &#39;jj&#39;, 1000);
        } else {
            Vue.set(data, &#39;tcbl&#39;, 0.07);
            Vue.set(data, &#39;jj&#39;, 1500);
        }
        data.tcje = (yj * data.tcbl).toFixed(1);
        data.total = (parseFloat(data.tcje) + parseFloat(data.dx) + parseFloat(data.jj));
    }
  
</script>

Copy after login

Related free learning recommendations: JavaScript (video)

The above is the detailed content of How to refresh vue.js to change data. For more information, please follow other related articles on the PHP Chinese website!