javascript - 如何正确格式化 Vue 组件？

Question

我原以为以下内容会起作用，但根据本网站，它似乎并没有很好地以网格方式排列数据；

https://bootstrap-vue.org/docs/components/layout

<template>
<div>
    <div v-for="i in items">
        <b-container class="bv-example-row">
            <b-row>
                <b-col>Home</b-col>
                <b-col>Road</b-col>
                <b-col>Home ATS</b-col>
                <div class="w-500"></div>
                <b-col>{{i.Home_Neutral}}</b-col>
                <b-col>{{i.Visitor_Neutral}}</b-col>
                <b-col>{{i.ATS}}</b-col>
            </b-row>
        </b-container>
    </div>
</div>
</template>

谁能给我一些关于如何很好地格式化这些数据的提示，因为它似乎对我不起作用？我基本上只是想让数据更加分散并放入这样的盒子中；

例子

标签： javascripthtmlvue.jsvuepress