vue.js を更新してデータを変更する方法

vue.js を更新してデータを変更する方法: [Vue.set()] 関数を使用して変更します。関数の形式は [Vue.set(data,'para','value')] です。 , ここで、 data は Vue の作成時に送信されるデータ オブジェクトの名前です。

#このチュートリアルの動作環境: Windows10 システム、vue2.9、この記事はすべてのブランドのコンピューターに適用されます。

【おすすめ関連記事:

vue.js】

vue.js を更新してデータを変更する方法:

Vue オブジェクトが生成されると、Vue オブジェクト内のデータを変更するだけではページ上で自動的に更新されないため、変更するには Vue.set() 関数を使用する必要があります。関数の形式は

Vue.set(data ,'para','value')、data は Vue の作成時に送信されるデータ オブジェクトの名前、次の 2 つのパラメーターはデータ オブジェクト内の変数名と値です。 .

ページ初期化コード:

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

Vue テンプレートの変数を変更するために js を使用する必要があるコード:

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

関連する無料学習の推奨事項:

JavaScript (ビデオ)

以上がvue.js を更新してデータを変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。