vue.js 动态添加组件-优快云博客

本文链接：https://blog.youkuaiyun.com/vincent_duan/article/details/100880410

本文介绍了一种使用Vue.js创建动态信息卡片的方法，通过组件化的方式实现用户信息展示及图片轮播功能。文章详细展示了如何定义组件、绑定数据以及响应式操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端页面：

<div class="container">
    <div class="row justify-content-md-center">
        <div class="col-md-3" id="info">
            <div v-for="userinfo in items">
                <info_div_card :userinfo="userinfo"></info_div_card>
            </div>
        </div>
    </div>
</div>
<template id="info_div_card">
    <div class="card text-center" style="width: 18rem;">
        <div class="card-body">
            <div id="info_div_carousel" class="carousel slide" data-raid="carousel">
                <div class="carousel-inner">
                    <template v-for="(img, index) in userinfo.imgs" v-if="index==0">
                        <div class="carousel-item active">
                            <img class="d-block w-50" style="margin:0 auto;" v-bind:src="img">
                        </div>
                    </template>
                    <template v-for="(img, index) in userinfo.imgs" v-if="index!==0">
                        <div class="carousel-item active">
                            <img class="d-block w-50" style="margin:0 auto;" v-bind:src="img">
                        </div>
                    </template>
                </div>
                <a class="carousel-control-prev" href="#info_div_carousel" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next" href="#info_div_carousel" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
            <ul class="list-group list-group-flush">
                <li class="list-group-item">idcard:{{ userinfo.idcard }}</li>
                <li class="list-group-item">姓名:{{ userinfo.name }}</li>
                <li class="list-group-item">手机号: {{ userinfo.phone }}</li>
                <a href='javascript:void(0);' v-on:click="jump" class="cark-link">个人档案</a>
            </ul>
        </div>
    </div>
</template>

js：

Vue.component("info_div_card", {
    props: ['userinfo'],
    template: '#info_div_card',
    methods: {
        jump: function() {
            console.log(this.userinfo.idcard);
        }
    }
});

info_card = new Vue({
    el: "#info",
    data: {
        items: []
    }
});

function addcard(){
    console.log(info_card.items.length)
    info_card.items.push({
        name: "abc",
        idcard: "1111",
        phone: "137",
        imgs: []
    });
}

addcard()方法会动态添加info_div_card组件