So aktualisieren und ändern Sie Daten in vue.js

So aktualisieren und ändern Sie Daten in vue.js: Verwenden Sie die Funktion [Vue.set()], um Änderungen vorzunehmen. Das Funktionsformat ist [Vue.set(data,'para','value')], wobei data ist bei der Erstellung von Vue der Name des übertragenen Datenobjekts.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Vue Version 2.9.6, Dell G3-Computer. Diese Methode ist für alle Computermarken geeignet.

【Empfohlene verwandte Artikel: vue.js】

vue.js-Methode zum Aktualisieren und Ändern von Daten:

Denn sobald das Vue-Objekt generiert ist, ändern Sie einfach die Daten im Vue-Objekt wird nicht auf der Seite angezeigt. Sie müssen Vue.set()函数来进行修改,函数格式为Vue.set(data,'para','value')

verwenden, wobei Daten der Name des Datenobjekts ist, der beim Erstellen von Vue übertragen wird, und die nächsten beiden Parameter die Variablennamen und -werte in sind jeweils das Datenobjekt

Seiteninitialisierungscode:

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

Sie müssen js to Vue Code verwenden, um Variablen in der Vorlage zu ändern:

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

Verwandte Lernempfehlungen: js-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo aktualisieren und ändern Sie Daten in vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!