3.6 Templates -- Binding Element Class Names(绑定元素类名)

Posted 2020-06-07

1. 一个html元素的class属性可以像其他属性一样被绑定：

<div class={{priority}}>
  Warning!
</div>

生成的HTML

<div class="p4">
  Warning!
</div>

2. 条件值

如果你需要一个基于条件属性的class值，使用if：

<div class={{if isUrgent ‘is-urgent‘}}>
  Warning!
</div>

如果isUrgent是false，HTML：

<div>
  Warning!
</div>

如果是true:

<div class="is-urgent">
  Warning!
</div>

3. 你也可以指定一个class名字当属性值是false时：

<div class={{if isEnabled ‘enabled‘ ‘disabled‘}}>
  Warning!
</div>

如果isEnabled属性是true：

<div class=‘enabled‘>
  Warning!
</div>

false:

<div class=‘disabled‘>
  Warning!
</div>