vue动态添加dom元素

// Vue动态添加DOM元素示例

// 1. 引入Vue库
// 确保在HTML文件中已经引入了Vue.js，例如：
// <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

// 2. 创建Vue实例并定义一个数组来存储动态添加的元素
new Vue({
  el: '#app',
  data: {
    items: [] // 存储要动态添加的元素
  },
  methods: {
    // 添加新元素的方法
    addItem() {
      this.items.push({ text: '新元素' + (this.items.length + 1) });
    }
  }
});

// 3. 在HTML中使用v-for指令遍历items数组，并为每个元素生成对应的DOM
<div id="app">
  <ul>
    <li v-for="(item, index) in items" :key="index">{{ item.text }}</li>
  </ul>
  <button @click="addItem">添加元素</button>
</div>

// 解释说明：
// - `data` 中的 `items` 数组用于存储所有动态添加的元素。
// - `methods` 中的 `addItem` 方法用于向 `items` 数组中添加新的对象。
// - 使用 `v-for` 指令遍历 `items` 数组，并为每个元素生成一个 `<li>` 标签。
// - 点击按钮时会调用 `addItem` 方法，从而动态添加新的DOM元素。