warisFairy 2023-03-14 10:43 采纳率: 43.7%
浏览 50
已结题

vue如何动态添加dom元素

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="年龄"..
  • 写回答

3条回答 默认 最新

  • MarkHan_ 2023-03-14 11:15
    关注

    该回答引用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中。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 3月22日
  • 已采纳回答 3月14日
  • 创建了问题 3月14日

悬赏问题

  • ¥15 如何让子窗口鼠标滚动独立,不要传递消息给主窗口
  • ¥15 如何能达到用ping0.cc检测成这样?如图
  • ¥15 关于#DMA固件#的问题,请各位专家解答!
  • ¥15 matlab生成的x1图不趋于稳定,之后的图像是稳定的水平线
  • ¥15 请问华为OD岗位的内部职业发展通道都有哪些,以及各个级别晋升的要求
  • ¥20 微信小程序 canvas 问题
  • ¥15 系统 24h2 专业工作站版,浏览文件夹的图库,视频,图片之类的怎样删除?
  • ¥15 怎么把512还原为520格式
  • ¥15 MATLAB的动态模态分解出现错误,以CFX非定常模拟结果为快照
  • ¥15 求高通平台Softsim调试经验