How to refresh and change data in vue.js

Vue.js method to refresh and change data: use the function [Vue.set()] 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: Windows 7 system, Vue version 2.9.6, Dell G3 computer. This method is suitable for all brands of computers.

【Recommended related articles: vue.js】

vue.js method to refresh and change data:

Because once the Vue object is generated, if you just modify the data in the Vue object, it will not be automatically updated on the page. You have to use the Vue.set() function to modify it. 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 names and values ​​​​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 learning recommendations: js video tutorial

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