Vue: условный рендеринг класса - PullRequest
Новая
       10

Vue: условный рендеринг класса

0 голосов
/ 08 мая 2020

Я использую vue - bootstrap, в следующем коде класс приходит, когда step === 1, но в условии else (! Step === 1) я хочу отобразить другой класс. Первый работает нормально, другое условие не работает. Шаги связаны с мастерами. Кто-нибудь может мне помочь? 

 <div :class="{'d-flex flex-column justify-content-center align-items-center': step === 1, ' d-flex justify-content-center align-items-center': !step === 1  }"></div>

Ответы [ 2 ]

1 голос
/ 08 мая 2020

Для условия if вы правильно используете step===1, но для условия else вам нужно использовать 

step !== 1

, что означает, что если step не равно 1, добавьте эти классы. Итак, шаблон будет иметь вид: 

<div :class="{
   'd-flex flex-column justify-content-center align-items-center': step === 1, 
   'd-flex justify-content-center align-items-center': step !== 1
 }">
</div>

Но, как кажется, для step===1 вы просто добавляете flex-column, а другие классы d-flex justify-content-center align-items-center являются общими в обоих условиях, поэтому вы также можете попробуйте это: 

<div 
  class="d-flex justify-content-center align-items-center"
  :class="{'flex-column': step === 1}">
</div>
0 голосов
/ 08 мая 2020

Насколько я понимаю, вам нужно что-то вроде: если step равен 1, выровняйте элементы в столбце иначе в строке. Вы можете привязать класс, как показано ниже. 

<div 
   :class="step === 1 ? 
        'd-flex flex-column justify-content-center align-items-center': 
        'd-flex justify-content-center align-items-center'">
  ...
  ...
</div>
...