vue 点击增加增加一行空数组

俊人呀

于 2018-01-25 10:00:42 发布

阅读量7.6k

点赞数

本文链接：https://blog.csdn.net/wangjunren1/article/details/79158156

版权

本文介绍了一个使用 Vue.js 实现的动态表单示例，通过点击按钮可以添加或删除表单项，每项包含一个输入框和删除按钮。此示例展示了 Vue 的数据绑定、组件交互及事件处理等特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div>
    <div @click="add" style="margin-top:30px">新增</div>
    <div v-for="(name, index) in form" :key="index">
      <input v-model="name.text" type="text">
      <div class="delete" @click="deleteItem(index)">删除</div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
export default {
  data() {
    return {
      form: [
        { text: '111', type: 'sdfas' },
        { text: '222', type: 'sdfas' },
        { text: '333', type: 'sdfas' },
        { text: '444', type: 'sdfas' }
      ]
    }
  },
  methods: {
    add() {
      console.log('add')
      this.form.push({ text: this.form.length, type: 'sdfas' })
    },
    deleteItem(index) {
      this.form.splice(index, 1)
      console.log(index)
    }
  },
  beforeRouteLeave(to, from, next) {
    this.$destroy()
    next()
  }
}
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
</style>