Vue.js 动态添加 DIV 并实现双向数据绑定

本文将介绍如何使用 Vue.js 动态添加 DIV 元素，每个 DIV 中包含一个 input 输入框，并通过 v-model 实现双向数据绑定。每次点击添加按钮时都会创建一个新的 DIV 和输入框，方便用户输入和管理数据。

可以通过以下步骤实现：

在 Vue 组件中定义一个数组 timlist，用于存储添加的 div 对象。
在模板中使用 v-for 指令遍历 timlist 数组，生成每个 div 对象。
在每个 div 对象中添加一个 input 元素，使用 v-model 指令实现双向绑定。
在点击添加按钮时，向 timlist 数组中添加一个新的对象，该对象的属性用于绑定 input 中的数据。

以下是示例代码：

<template>
  <div>
    <button @click="addDiv">添加</button>
    <div v-for="(item, index) in timlist" :key="index">
      <input type="text" v-model="item.value">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      timlist: []
    };
  },
  methods: {
    addDiv() {
      this.timlist.push({ value: '' });
    }
  }
};
</script>

每次点击添加按钮时，就会在 timlist 数组中添加一个新的对象，该对象的 value 属性用于绑定 input 中的数据。在模板中使用 v-for 指令遍历 timlist 数组，并使用 v-model 指令实现双向绑定。这样就可以实现每点击一次添加按钮就会添加一个 div 对象，并且 input 中的数据是双向绑定的。