VUE3(五)列表渲染

v-for与template的结合使用

<ul>标签中只推荐使用<li>标签,为了实现样式,需要结合template来使用:

    <style>
        .divider{
            width: 50%;
            height: 1px;
            border-top: solid #ACC0D8 1px;
        }
    </style>
    <template id="my-app">
        <ul>
            <template v-for="(value, key) in info">
                <li>{{value}}</li>
                <li>{{key}}</li>
                <li class="divider"></li>
            </template>
        </ul>
    </template>

效果如图:

发表评论