如何在HTML中设置条件换行符

时间:2018-10-11 03:41:33

标签: javascript html angularjs

如何有条件地向HTML按钮添加换行符?

我有这样的按钮:

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

现在,我的条件是,如果我设置按钮的隐藏文本,它将仅隐藏文本“ Button Clicked”,并将文本“(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>

但它会在按钮上打印/显示我的代码。

2 个答案:

答案 0 :(得分: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 />标签,否则将启用。

答案 1 :(得分:0)

Javascript不是模板框架,而是javascript。评论者问的是双胡须语法中的代码。

它看起来不像Handlebars或Blade,因为您没有在其中插入#if语句。看起来确实像Vue.js。

但是,在Vue.js中,您应该将条件放在v-if属性中。

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