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

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

藏色散人

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

オリジナル

4040 人が閲覧しました

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 にはいくつかのパラメータがあります