vue实现添加结点

Vue 实现添加节点的方法

在 Vue 中动态添加节点可以通过多种方式实现，以下是几种常见的方法：

使用 v-for 指令

通过操作数组数据，结合 v-for 指令动态渲染节点列表。当数组更新时，Vue 会自动重新渲染 DOM。

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">{{ item }}</li>
    </ul>
    <button @click="addItem">添加节点</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['节点1', '节点2']
    }
  },
  methods: {
    addItem() {
      this.items.push(`节点${this.items.length + 1}`)
    }
  }
}
</script>

使用 $refs 和原生 DOM 操作

通过 $refs 获取 DOM 元素引用，然后使用原生 DOM API 添加节点。

<template>
  <div>
    <ul ref="list">
      <li>已有节点</li>
    </ul>
    <button @click="addNode">添加节点</button>
  </div>
</template>

<script>
export default {
  methods: {
    addNode() {
      const newLi = document.createElement('li')
      newLi.textContent = '新节点'
      this.$refs.list.appendChild(newLi)
    }
  }
}
</script>

使用动态组件

通过 :is 动态切换组件，实现节点的添加。

<template>
  <div>
    <component :is="currentComponent"></component>
    <button @click="addComponent">添加组件</button>
  </div>
</template>

<script>
import NewComponent from './NewComponent.vue'

export default {
  data() {
    return {
      currentComponent: null
    }
  },
  methods: {
    addComponent() {
      this.currentComponent = NewComponent
    }
  }
}
</script>

使用 Vue 的渲染函数

通过 render 函数直接控制虚拟 DOM 的生成，实现更灵活的节点添加。

<script>
export default {
  data() {
    return {
      nodes: ['节点1', '节点2']
    }
  },
  render(h) {
    return h('div', [
      h('ul', this.nodes.map(node => h('li', node))),
      h('button', {
        on: {
          click: this.addNode
        }
      }, '添加节点')
    ])
  },
  methods: {
    addNode() {
      this.nodes.push(`节点${this.nodes.length + 1}`)
    }
  }
}
</script>

使用 Vue 的过渡动画

为添加节点添加过渡效果，提升用户体验。

<template>
  <div>
    <transition-group name="fade" tag="ul">
      <li v-for="(item, index) in items" :key="index">{{ item }}</li>
    </transition-group>
    <button @click="addItem">添加节点</button>
  </div>
</template>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

以上方法可以根据具体需求选择使用。对于大多数情况，推荐使用 v-for 配合数组操作的方式，这是 Vue 最推荐的数据驱动视图的模式。