vue知识点(工作中遇到)

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>

以上是 vue知识点(工作中遇到) 的全部内容, 来源链接: utcz.com/z/379457.html

回到顶部