擼了今年阿里、頭條和美團的面試，我有一個重要發現.......>>>

前端頁面：

<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組件

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的vue.js 动态添加组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。