Vue如何实现多图添加显示和删除

这篇文章给大家分享的是有关Vue如何实现多图添加显示和删除的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

效果图：

首先给一个input[type="file"]，然后隐藏掉，当点击加号所在的区域时，触发文件选择的点击事件。

注意：取src的值时用v-bind:src="imgsrc";用src="imgsrc"或者src="{{imgsrc}}"会报错。

代码：（有些样式省略，主要是添加和删除方法）

<template> <div id="originality">    <div class="ipt">主图：</div>    <div class="picture">     <div class="Mainpicture">      <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"  @change="changeMulPic()">      </div></template> <script> export default {  name: "originality",  components: {   },  data() {   return {       imgsrcs: []   }  },  methods: {   uploadPic: function(val) {    document.getElementById(val).click();   },   changeMulPic: function() {    var file = $("#filed").get(0).files[0];    $("#img").show();    this.imgsrcs.push(window.URL.createObjectURL(file))   },   deleteMulPic: function(index) {    this.imgsrcs.splice(index, 1);   }  } }</script> <style scoped>  .Mainpicture {  float: left;  width: 100px;  height: 100px;  background: rgba(255, 255, 255, 1);  border-radius: 2px;  border: 1px solid #E5E9F2; }  .picture {  min-height: 100px; }  .files {  display: none;  float: left; }  #img {  margin-left: 20px;  float: left;  width: 100px;  height: 100px;  border-radius: 2px;  border: 1px solid #E5E9F2; }  .icon-cha {  cursor: pointer;  position: absolute;  width: 10px;  height: 10px;  margin-left: 85px;  margin-top: -100px;  color: #BFC5D1; }  #imgshow {  width: 100px;  height: 100px; }  .icon-jia {  text-align: center;  width: 20px;  height: 20px;  line-height: 20px;  color: #BFC5D1;  padding: 40px;  cursor: pointer; } </style>

感谢各位的阅读！关于“Vue如何实现多图添加显示和删除”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！