Почему в этом случае использование v-for отличается от размещения каждого элемента отдельно?Также Bootstrap контент-центрирование

Question

Я экспериментировал со своими новыми знаниями о 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>

Отрисовывает три кнопки на одной приклеенной.Хотя, если я заменим оператор 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>

Он прекрасно все отрисовывает.Я не понимаю, почему, так как, когда я проверяю последние элементы в обоих сценариях, они одинаковы.

Я не собирался спрашивать, но мне также не удалось отцентрировать красную кнопку сброса.Поскольку я уже задаю вопрос, было бы хорошо узнать, почему то, что я пробовал, не работает так же хорошо.

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