vue使用component遇到的问题

- Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.-我是先谢了一个模板,内容如下:

<script type="text/html" id="zlbId-list-item">
<divclass="zlb_list_img">
<imgsrc="images/zlb_profile_photo1.png"alt=""/>
</div>
<div class="zlb_list_title">
<p class="zlb_list_title_level"></p>
<p class="zlb_list_title_date"></p>
</div>
<div class="zlb_list_detail"></div>
</script>

组件的写法:

Vue.component('list-item', {props: ['level', 'date', 'price'],template: $('#zlbId-list-item').html()})

最后渲染的时候报错:

<ul class="zlb_list" id="zlbId-list"><list-item v-for="items in list" class="zlb_list_item" :key="items.id"></list-item></ul>

从网上查看资料,说的是组件模板只能有一个根元素:

模板改成:

<script type="text/html" id="zlbId-list-item"><divclass="zlb_list_detail">123456</div></script>

就渲染成功