在这种情况下，为什么使用v-for与分别放置每个项目不同？也是Bootstrap内容居中

Question

当我遇到无法解释的行为时，我正在尝试自己新获得的Vue和Bootstrap知识。

center.requestAuthorization(options: [.alert, .badge, .sound]) { (granted, error) in
    if granted {
        print("Yep")
    } else {
        print("No")
        DispatchQueue.main.async{
            self.notEnable()
        }
    }
}

使三个按钮粘合在一起。尽管我将v-for语句替换为以下三个按钮语句：

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

它完美呈现所有内容。我不明白为什么，因为当我检查两种情况下的最终元素时，它们都是相同的。

我不想问，但是我也无法将红色的重置按钮居中。既然我已经问过一个问题，那么很高兴知道为什么我尝试过的方法也不起作用。

Answer 1

因为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）...

<button v-for="tipo in tiposJogadas" class="btn btn-primary mr-1" @click="escolhe(tipo)">{{ tipo }}</button>

https://www.codeply.com/go/pXOPYAA8St