vue如何动态添加dom元素

Question

vue如何动态添加dom元素

根据我输入的数字n 动态渲染n组数据
每组 姓名-身份证-年龄

生成的是el-descriptions

<el-descriptions :column="3" border size='small'  class="mb20">
</el-descriptions>

大概就是这个意思
输入1 生成一组

<el-descriptions-item label="姓名" ..
<el-descriptions-item label="身份证"..
<el-descriptions-item label="年龄"..

Answer 1

该回答引用GPTᴼᴾᴱᴺᴬᴵ
你可以使用v-for指令在Vue中动态生成DOM元素。可以通过定义一个数组或对象，然后在模板中使用v-for指令循环遍历数组或对象，并使用数据中的属性来动态渲染元素。

例如，在你的情况下，可以在data中定义一个persons数组，然后使用v-for指令循环遍历这个数组来动态渲染el-descriptions。

代码示例：

<el-descriptions :column="3" border size='small'  class="mb20">
  <el-descriptions-item v-for="(person, index) in persons" :key="index" :label="'姓名'" :content="person.name"></el-descriptions-item>
  <el-descriptions-item v-for="(person, index) in persons" :key="index" :label="'身份证'" :content="person.idCard"></el-descriptions-item>
  <el-descriptions-item v-for="(person, index) in persons" :key="index" :label="'年龄'" :content="person.age"></el-descriptions-item>
</el-descriptions>

在你的Vue实例中，你可以定义一个addPerson方法来动态添加一个person对象到persons数组中。

data() {
  return {
    persons: []
  }
},
methods: {
  addPerson() {
    this.persons.push({
      name: '张三',
      idCard: 'xxx',
      age: 18
    })
  }
}

你可以在你的模板中添加一个输入框来输入要添加的person对象的数量，并绑定到一个addCount变量。当用户点击“添加”按钮时，可以使用一个循环来添加指定数量的person对象。

<template>
  <div>
    <input type="number" v-model="addCount">
    <button @click="addPersons">添加</button>
    <el-descriptions :column="3" border size='small'  class="mb20">
      <el-descriptions-item v-for="(person, index) in persons" :key="index" :label="'姓名'" :content="person.name"></el-descriptions-item>
      <el-descriptions-item v-for="(person, index) in persons" :key="index" :label="'身份证'" :content="person.idCard"></el-descriptions-item>
      <el-descriptions-item v-for="(person, index) in persons" :key="index" :label="'年龄'" :content="person.age"></el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
export default {
  data() {
    return {
      persons: [],
      addCount: 0
    }
  },
  methods: {
    addPersons() {
      for (let i = 0; i < this.addCount; i++) {
        this.persons.push({
          name: '张三',
          idCard: 'xxx',
          age: 18
        })
      }
    }
  }
}
</script>

这样，当你输入一个数字n并点击添加按钮时，就会动态渲染n组数据到el-descriptions中。