Vue.js 在这种情况下，为什么使用v-for不同于单独放置每个项目？也可以引导内容集中

我正在尝试我新学到的Vue和Bootstrap知识，突然发现了一种无法解释的行为

<div class="col-sm-4" class="text-center">
    <p v-html="mensagem"></p>
    <button v-for="tipo in tiposJogadas" class="btn btn-primary" @click="escolhe(tipo)">{{ tipo }}</button>

    <div class = "row">
        <div class = "column-sm-12" class="text-center">
            <button class="btn btn-danger" @click="reset()">Reiniciar</button>
        </div>
    </div>

</div>

{{tipo}}
雷尼西亚尔

渲染上的三个按钮，并将它们粘在另一个按钮上。而如果我将v-for语句替换为如下三个按钮语句：

<div class="col-sm-4" class="text-center">
    <p v-html="mensagem"></p>
    <button class="btn btn-primary" @click="escolhe('pedra')">Pedra</button>
    <button class="btn btn-primary" @click="escolhe('papel')">Papel</button>
    <button class="btn btn-primary" @click="escolhe('tesoura')">Tesoura</button>

    <div class = "row">
        <div class = "column-sm-12" class="text-center">
            <button class="btn btn-danger" @click="reset()">Reiniciar</button>
        </div>
    </div>

</div>

佩德拉
丘疹
特苏拉
雷尼西亚尔

它完美地呈现了一切。我不明白为什么，因为当我检查两个场景中的最终元素时，它们是相同的

---

我本来不想问的，但我也没办法把红色的重置按钮放在中间。既然我已经在问一个问题了，那就很高兴知道为什么我所尝试的方法不起作用。

因为HTML中返回的行在按钮之间添加了空格<代码>v-for不是<代码>v-for的渲染与

<div class="col-sm-4">
    <p v-html="mensagem"></p>
    <button class="btn btn-primary" @click="escolhe('pedra')">Pedra</button><button class="btn btn-primary" @click="escolhe('papel')">Papel</button><button class="btn btn-primary" @click="escolhe('tesoura')">Tesoura</button>
    <div class="row">
        <div class="column-sm-12">
            <button class="btn btn-danger" @click="reset()">Reiniciar</button>
        </div>
    </div>
</div>

佩德拉帕佩尔特苏拉
雷尼西亚尔

您可以在每个按钮上添加右边距（

mr-1

）

{{tipo}}