So aktualisieren Sie vue.js, um Daten zu ändern

So aktualisieren Sie vue.js, um Daten zu ändern: Verwenden Sie die Funktion [Vue.set()], um Änderungen vorzunehmen. Das Funktionsformat ist [Vue.set(data,'para','value')], wobei data ist wann Vue erstellt wurde Der Name des übertragenen Datenobjekts.

Die Betriebsumgebung dieses Tutorials: Windows10-System, vue2.9, dieser Artikel gilt für alle Computermarken.

【Empfohlene verwandte Artikel: vue.js】

So aktualisieren Sie vue.js, um Daten zu ändern:

Denn sobald das Vue-Objekt generiert ist, ändern Sie einfach die Daten im Vue-Objekt Es wird nicht automatisch aktualisiert. Sie müssen die Funktion Vue.set() verwenden, um sie zu ändern Die nächsten beiden Parameter sind der Variablenname bzw. der Wert im Datenobjekt. Vue.set(data,'para','value')

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>

Code, der js verwenden muss, um die Variablen in der Vue-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 kostenlose Lernempfehlungen:

JavaScript (Video)

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