vue知识点（工作中遇到）

1、vue点击按钮动态添加多个input，并获取输入的值

　

<template>
　　<div>
　　　　<input type="text" v-for="(item,i) of items" v-model="items[i]" :key="i">
　　　　<button @click="onAdd">添加</button>
　　</div>
</template>
<script>
export default {
  data() {
    return {
      items: []
    }
  },
  methods: {
    onAdd() {
      this.items.push("");
    }
  }
}
</script>

 

2、点击div，触发<input type="file"> 的点击事件

<template>
    <div>
        <div class="ad-img-wrap" @click="changeImageHandler">
            <span class="iconfont iconjiahao"></span>
        </div>
        <input type="file" @change="changeImgHandler" ref="adImg" style="display: none;">
    </div>
</template>
<script>
methods:{
    changeImageHandler () {
        this.$refs.adImg.dispatchEvent(new MouseEvent('click'))
    }
}
</script>