Vueは複数の画像の追加、表示、削除を実装します

<テンプレート>
 <div id="オリジナリティ">
    <div class="ipt">メイン画像:</div>
    <div class="picture">
     <div class="メイン画像">
      <div class="iconfont icon-jia" @click="uploadPic('filed')"></div>
     </div>
     <!--メイン画像に複数の画像を追加できます-->
     <div id="img" v-for="(imgsrc,index) in imgsrcs">
      <img id="imgshow" :src="imgsrc">
      <div class="iconfont icon-cha" @click="deleteMulPic(index)"</div>
     </div>
    </div>
    <input id="filed" type="file" multiple="multiple" accept="image/*,application/pdf" style="display: none;" @change="changeMulPic()">
 
    
 </div>
</テンプレート>
 
<スクリプト>
 エクスポートデフォルト{
  名前: 「オリジナリティ」、
  コンポーネント:
 
  },
  データ（） {
   戻る {   
    画像ソース: []
   }
  },
  メソッド: {
   アップロード写真: 関数(val) {
    document.getElementById(val).click();
   },
   マルチピクチャの変更: 関数() {
    var ファイル = $("#filed").get(0).files[0];
    $("#img").表示();
    this.imgsrcs.push(window.URL.createObjectURL(ファイル))
   },
   deleteMulPic: 関数(インデックス) {
    this.imgsrcs.splice(インデックス、1);
   }
  }
 }
</スクリプト>
 
<スタイルスコープ>
 
 .メイン画像{
  フロート: 左;
  幅: 100ピクセル;
  高さ: 100px;
  背景: rgba(255, 255, 255, 1);
  境界線の半径: 2px;
  境界線: 1px 実線 #E5E9F2;
 }
 
 。写真 {
  最小高さ: 100px;
 }
 
 .ファイル {
  表示: なし;
  フロート: 左;
 }
 
 #画像 {
  左マージン: 20px;
  フロート: 左;
  幅: 100ピクセル;
  高さ: 100px;
  境界線の半径: 2px;
  境界線: 1px 実線 #E5E9F2;
 }
 
 .icon-cha {
  カーソル: ポインタ;
  位置: 絶対;
  幅: 10px;
  高さ: 10px;
  左マージン: 85px;
  上マージン: -100px;
  色: #BFC5D1;
 }
 
 #画像を表示{
  幅: 100ピクセル;
  高さ: 100px;
 }
 
 .icon-jia {
  テキスト配置: 中央;
  幅: 20px;
  高さ: 20px;
  行の高さ: 20px;
  色: #BFC5D1;
  パディング: 40px;
  カーソル: ポインタ;
 }
 
</スタイル>