简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > Vue.js > 本文

vue の vue.set にはいくつかのパラメータがあります

藏色散人
リリース： 2023-01-13 00:44:57
オリジナル
4010 人が閲覧しました

vue の

vue.set には 3 つのパラメータがあります: 1. target、変更するデータ ソースを示します; 2. key、変更する特定のデータを示します; 3. value、再割り当てされた値を示します。

vue の vue.set にはいくつかのパラメータがあります

この記事の動作環境: Windows10 システム、vue2.9、Dell G3 コンピューター。

Vue.set()

Vue.set( target, key, value )
ログイン後にコピー

パラメータ:

  • target: 変更するデータ ソース (オブジェクトまたは配列)

  • key: 変更する特定のデータ

  • value: 再割り当てされた値

公式API: Vue.set()

Vue.setの使い方

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app2">
    <p v-for="item in items" :key="item.id">
        {{item.message}}
    </p>
    <button @click="btn2Click()">动态赋值</button><br/>    
    <button @click="btn3Click()">为data新增属性</button>
</div>
<script src="../../dist/vue.min.js"></script>
<script>
var vm2=new Vue({
    el:"#app2",
    data:{
        items:[
            {message:"Test one",id:"1"},
            {message:"Test two",id:"2"},
            {message:"Test three",id:"3"}
        ]
    },
    methods:{
        btn2Click:function(){
            Vue.set(this.items,0,{message:"Change Test",id:&#39;10&#39;})
        },
        btn3Click:function(){
            var itemLen=this.items.length;
            Vue.set(this.items,itemLen,{message:"Test add attr",id:itemLen});
        }
    }
});
</script>
</body>
</html>
ログイン後にコピー

ページはこんな感じです

vue の vue.set にはいくつかのパラメータがあります

#最初のボタンをクリックした後、メソッドで btn2Clcick メソッドを実行します。このとき、テスト 1 を Change Test に変更します。

vue の vue.set にはいくつかのパラメータがあります

実行後の結果: この時点で、リストの最初の列のテストは Change Test になりました

vue の vue.set にはいくつかのパラメータがあります

#ここで注意しなければならない状況があります。

JS の記述に慣れてくると、配列内の特定の添え字のデータを変更したい場合がありますが、this.items[XX] を次のように変更するだけです。 # 結果を見てみましょう:

この状況は、Vue ドキュメントに明確に記載されている注記です。JavaScript の制限により、Vue はデータの変更を検出できないため、データを動的に変更する必要がある場合、Vue.set() はニーズを完全に満たします。 vue の vue.set にはいくつかのパラメータがあります

注意深く見る生徒は、「ボタンがあるではないか?何に使うの?」と尋ねるかもしれません。

直接見てみましょう:

これは初期リスト データです。データ内には 3 つのオブジェクトがあります vue の vue.set にはいくつかのパラメータがあります

クリック後:

Vue.set() はデータを変更するだけでなく、データを追加することもでき、Vue 配列突然変異メソッドの欠点を補うことができることがわかりますvue の vue.set にはいくつかのパラメータがあります

ヒント:Vue.set() は、メソッド内で this.$set()

として記述することもできます: "

vuetutorial

"

以上がvue の vue.set にはいくつかのパラメータがありますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
vue
ソース：php.cn
前の記事：Ant Design は vue をサポートしていますか? 次の記事：vue.nexttickとは何ですか
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
テンプレートのメソッドで定義された変数の使用 Vue (v3 ではなく v2) を使用するのは初めてで、テンプレート内 (メソッド内で定義された) で変数を使用しようとしています。私の簡略化されたコード: <templa...
から 2024-04-06 18:10:25
0
2
513
ログインせずに Firebase を使用して Vue でユーザーを作成する ユーザープロフィールを作成するフォームを作成しました。しかし、ユーザーを作成するたびに問題が発生します。ログインおよびログアウトしたユーザー。この問題の解決にご協力ください。 co...
から 2024-04-06 14:20:12
0
1
514
Vue3 Webコンポーネントのプロダクションビルドの問題を解決する vue2web コンポーネントを vue3 に移行しようとしていますが、運用用のビルドを作成するときに問題が発生します。 --targetwc を指定して vue-cli を使用し...
から 2024-04-06 12:43:37
0
1
473
vue vee-validate は日付ピッカーの選択の問題をキャプチャします datepicker フィールドの v-model バインディングが正しく機能しません。選択を行うと、画面上でライブ更新されますが、値は formValues リアクティブ オブジ...
から 2024-04-06 11:38:56
0
1
510
Vueでルートプロパティを設定する方法はありますか? ページ内の特定のタブ this.$router.push({name:"AdminNotifications",params:{tab:"reques...
から 2024-04-06 11:35:59
0
1
456
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！