WeX5数据绑定:style绑定

优质
小牛编辑
135浏览
2023-12-01

style绑定为元素添加一个或多个样式,如果需要绑定css,请参考style绑定。

示例代码:

//.W片段
//&lt; 是<的转义符
<div bind-style="{ color: currentProfit.get() &lt; 0 ? 'red' : 'black' }">
 Profit Information
</div>

//.js片段
//初始正值,div里的内容为黑色
this.currentProfit=justep.Bind.observable(150000);
//设置为负值,div里的内容变为红色
this.currentProfit.set(-50);

绑定规则:style绑定规则和css绑定规则相似,都是通过表达式判断是添加或移除一个样式。

在style绑定中,我们同样会遇到和css绑定时一样的问题:当样式的名称不是合法的JavaScript变量的时候,我们应该怎么办呢?

例如:font-weight,我们应该写成:fontWeight,或者用引号包裹起来:’font-weight’