Comment actualiser vue.js pour modifier les données

Comment actualiser vue.js pour modifier les données : 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 windows10, vue2.9, cet article est applicable à toutes les marques d'ordinateurs.

[Articles connexes recommandés : vue.js]

Comment actualiser vue.js pour modifier les données :

Parce qu'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. Vue.set(data,'para','value'), où data est Vue. Le nom de l'objet de données transmis lors de la création. 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 les variables dans le modèle Vue :

<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 gratuites associées :

JavaScript (vidéo)

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!