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>
原文地址:https://www.cnblogs.com/haishen/p/10254379.html