vue 如何给一个元素追加指定页面元素

在Vue中，可以使用v-if和v-for指令来控制元素的显示和追加指定的页面元素。

例如，可以创建一个数组来存储需要追加的元素，然后使用v-for指令将它们渲染到页面上，如下所示：

<template>
  <div>
    <div v-for="item in items" :key="item.id">
      {{ item.text }}
    </div>
    <button @click="addItem">添加元素</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: '元素1' },
        { id: 2, text: '元素2' },
        { id: 3, text: '元素3' },
      ]
    }
  },
  methods: {
    addItem() {
      const newItem = { id: 4, text: '元素4' }
      this.items.push(newItem)
    }
  }
}
</script>

在上面的代码中，我们使用v-for指令将items数组中的元素渲染到页面上。当点击添加元素按钮时，会向items数组中添加一个新的元素，从而实现了向页面追加指定元素的效果。

另外，如果需要在指定位置追加元素，可以使用Vue的ref特性，将元素标记为一个引用，然后通过JavaScript代码获取到该引用，再使用appendChild()方法将需要追加的元素添加到该引用的父元素中。例如：

<template>
  <div>
    <div ref="myDiv"></div>
    <button @click="addElem">添加元素</button>
  </div>
</template>

<script>
export default {
  methods: {
    addElem() {
      const newElem = document.createElement('div')
      newElem.innerHTML = '我是新元素'
      this.$refs.myDiv.parentNode.appendChild(newElem)
    }
  }
}
</script>

在上面的代码中，我们使用ref特性将一个元素标记为myDiv引用，然后在addElem方法中获取该引用，并使用appendChild()方法将一个新的元素添加到myDiv元素的父元素中，从而实现了向指定位置追加元素的效果。