如何有条件地向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>
但它会在按钮上打印/显示我的代码。
答案 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}})