样式绑定

通过数据状态来切换样式是一个常见的场景。

内置属性上的绑定

• 在class属性上进行插值来控制样式。

<div class="item {{className}}"></div>

• 在style属性上进行插值来控制样式

<div style="display: {{visible ? 'block' : 'none'}}"></div>

drunk-class

可能通过drunk-class的下面3种方式实现样式切换。

对象

<div class="tip yellow-text" drunk-class="{'red-text': isFailed, 'green-text': isDone, 'yellow-text': isWarn}"></div>

var app = new drunk.Component({
  isFailed: false,
  isDone: true,
  isWarn: false
});
app.$mount(document.body);

会渲染为：

<div class="tip green-text"></div>

对象中值为true的字段会作为样式添加到样式表中，为false的字段会从样式表中移除。

数组

<div drunk-class="[classA, classB, condition ? classC : classD]"></div>

var app = new drunk.Component({
  classA: 'class-a',
  classB: 'class-b',
  classC: 'class-c',
  classD: 'class-d',
  condition: false
});
app.$mount(document.body);

会渲染为：

<div class="class-a class-b class-d"></div>

字面量

直接绑定一个数据字面量，会根据数据的类型进行相应的样式切换。

<div drunk-class="classContext"></div>

var app = new drunk.Component();
app.$mount(document.body);

app.classContext = ['a', 'b']; // 渲染为: <div class="a b"></div>
app.classContext = {a: true, b: false, c: true}; // 渲染为: <div class="a c"></div>
app.classContext = "d"; // 渲染为 <div class="a c d"></div>