How to refresh vue.js to change data

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.

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>

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>

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!