vue.js でデータを更新および変更する方法-Vue.js-php.cn

vue.js でデータを更新および変更する方法

coldplay.xixi

リリース： 2023-01-13 00:44:50

オリジナル

3369 人が閲覧しました

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

vue.js でデータを更新および変更する方法

このチュートリアルの動作環境: Windows 7 システム、Vue バージョン 2.9.6、Dell G3 コンピューターこの方法は、すべてのブランドのコンピューターに適しています。

【おすすめ関連記事: 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>

ログイン後にコピー