Vue.js 配列の追加と削除

See the Pen Vue.js v-for by takapen (@takapen) on CodePen.

配列から値を、1つづつ取り出しながら表示を繰り返す
繰り返し表示する


指定した数、表示を繰り返す
繰り返し表示する


配列から値と番号を、1つづつ取り出しながら表示を繰り返す
繰り返し表示する

{{ item }}
{{ index }} {{ item }}
{{ item.name }} {{ item.price }}

new Vue({
  el:'#app1',
  data:{
    array:['aaa','bbb','ccc'],
    objArray:[
      {name:'objaaa',price:100},
      {name:'objbbb',price:200}
    ]
  }
});

See the Pen Vue.js 配列データの追加と削除 by takapen (@takapen) on CodePen.

配列データの追加と削除

配列の末尾にデータを追加する
配列.push(追加データ);

配列の途中にデータを追加する
配列.splice(指定位置, 0, 追加データ);

h配列の途中のデータを削除する
配列.splice(指定位置, 1);

配列の途中にデータを変更する
配列.splice(指定位置, 1, 変更データ);


jsでは値を変えるときはこの書き方でいけるが、Vueだと変わらないのでspliceを使う

var array = [1,2,3,4];
array[0] = 100;

var array = [1,2,3,4];
array.splice(0, 1, 100);

{{ item }}

new Vue({
  el:'#app1',
  data:{
    array:['a','b','c','d','e']
  },
  methods:{
    addLast:function(){
      this.array.push('aaa');
    },
    addObj:function(index){
      this.array.splice(index, 0, 'bbb');
    },
    changeObj:function(index){
      this.array.splice(index, 1, 'ccc');
    },
    deleteObj:function(index){
      this.array.splice(index, 1);
    }
  }
});