Vue Push配列を実現し、削除した例

最近はVueでコメントインタラクティブをする時にPushを使いました。プロジェクトは反復的な開発なので、今は簡単なデモを作って振り返ってみます。

<template>
 <div>
  <ul v-for="(item , index) in list" :key="index">
   <li>
    {{item.serial}}---
    <button @click="remove(index)">  </button>
   </li>
  </ul>
  <input type="text" v-model="serial" />
  <input type="button" value="    " @click="getserial" />
 </div>
</template>

<script>
export default {
 data() {
  return {
   list: [
    { serial: 1 },
    { serial: 2 },
    { serial: 3 },
    { serial: 4 },
    { serial: 5 }
   ],
   serial: ""
  };
 },
 methods: {
  getserial() {
   this.list.push({
    serial: this.serial
   });
   this.serial = "";
  },
  //        
  remove(index) {
   //splice        
   this.list.splice(index, 1);
  }
 }
};
</script>

<style>
</style>

以上のVueがpush配列を実現し、削除した例は小編集が皆さんに提供した内容の全てです。参考にしていただければ幸いです。よろしくお願いします。