Comment actualiser et modifier les données dans vue.js

Comment actualiser et modifier les données dans vue.js : utilisez la fonction [Vue.set()] pour apporter des modifications. Le format de la fonction est [Vue.set(data,'para','value') ], où data C'est le nom de l'objet de données transmis lors de la création de Vue.

L'environnement d'exploitation de ce tutoriel : système Windows 7, Vue version 2.9.6, ordinateur Dell G3. Cette méthode convient à toutes les marques d'ordinateurs.

[Articles connexes recommandés : vue.js]

Méthode Vue.js d'actualisation des données modifiées :

Car une fois l'objet Vue généré, si vous modifiez simplement les données dans l'objet Vue, elles ne seront pas automatiquement mises à jour sur la page. Vous devez utiliser la fonction Vue.set() pour la modifier. Le format de la fonction est Vue.set(data,'para','value').

où data est le nom de l'objet de données transmis lors de la création de Vue. Les deux paramètres suivants sont le nom de la variable et la valeur dans l'objet de données

Code d'initialisation de la page :

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

.

Vous devez utiliser js pour modifier le modèle Vue. Code de modification des variables :

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

Recommandations d'apprentissage associées : Tutoriel vidéo js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!