Как условно разбить строку в HTML

Question

Как можно условно добавить разрыв строки для кнопки / кнопок HTML?

У меня есть кнопка, подобная этой:

+----------------+
| Button Clicked |
|      (5)       |
+----------------+

Теперь у меня есть условие, что, если я установлю скрытый текст кнопки, он будет скрывать только текст «Кнопка нажата» и задавать текст »(5) «вертикально и горизонтально по центру.Это должно быть так:

+---------------+
|               |
|      (5)      |
|               |
+---------------+

Вот мой HTML-код:

<button style="text-align:center; overflow: hidden;" class="btn btn-primary">
     {{btnClicked == 'hide' ? '' : 'Button Clicked'}} <br /> ({{clckCount}})
</button>

Я пробовал это:

<button style="text-align:center; overflow: hidden;" class="btn btn-primary">
         {{btnClicked == 'hide' ? '' : 'Button Clicked <br />'}} ({{clckCount}})
</button>

, но он печатает / показывает мой кодкнопка.

Answer 1

Спасибо, ребята, я нашел решение.Я добавил условие на мой <br />.

<br ng-if="btnClicked == 'hide' ? false : true" /> 

Вот мой обновленный код:

<button style="text-align:center; overflow: hidden;" class="btn btn-primary">
         {{btnClicked == 'hide' ? '' : 'Button Clicked'}} <br ng-if="btnClicked == 'hide' ? false : true" /> ({{clckCount}})
</button> 

Это отключит тег <br />, когда текст кнопки скрыт, и включит, если нет.

Answer 2

Javascript - это не шаблонизатор, это javascript.Код в вашем синтаксисе двойных усов - это то, о чем спрашивают комментаторы.

Это не похоже на Handlebars или Blade, потому что вы не вставили оператор #if. Это действительно похоже на Vue.js.

Однако в Vue.js вы должны поместить условие в атрибут v-if.

<span v-if="'hide' == btnClicked">Button Clicked <br /></span> ({{clckCount}})