ホームページ > 記事 > ウェブフロントエンド > vueループリスト内の動的データの処理方法(コード)
この記事の内容はvueループリストにおける動的データの処理方法(コード)ですので、お困りの方は参考にしていただければ幸いです。
呼び出しメソッド: Vue.set(target, key, value)
target: 変更するデータ ソース (オブジェクトまたは配列にすることができます)
キー: 変更する特定のデータ
値: 再割り当てされた値
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <p v-for="(item,index)in list" :key="item.id" @click="btnClick(index,item.id)"> {{item.message}} </p> </div> <script src="../../dist/vue.min.js"></script> <script> var vm2=new Vue({ el:"#app", data:{ list:[ {message:"星星",id:"1"}, {message:"太阳",id:"2"}, {message:"月亮",id:"3"} ] }, methods:{ btnClick(index,id){ this.$set(this.list,index,{message:"小猫",id:id}); } } }); </script> </body> </html>
以上がvueループリスト内の動的データの処理方法(コード)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。