前端框架Aurelia - Class & Style
2017-03-22 15:45
387 查看
1.Class
You can bind a css string or object to an element'sstyleattribute.Use the
styleattribute'salias,
csswhendoing string interpolation to ensure your application is compatible with Internet Explorer and Edge.You can bind an element's
classattributeusing string interpolation or with
.bind/
.one-time.可以用字符串插值或者.bind/.one-time绑定元素的class属性。
<template> <div class="foo ${isActive ? 'active' : ''} bar"></div> <div class.bind="isActive ? 'active' : ''"></div> <div class.one-time="isActive ? 'active' : ''"></div> </template>Toensure maximum interoperability with other JavaScript libraries, the binding system will only add or remove classes specified in the binding expression. This ensures classes added by other code (eg via
classList.add(...))are preserved. This "safe by default" behavior comes at a small cost but can be noticeable in benchmarks or other performance critical situations like repeats with lots of elements. You can opt out of the default behavior by binding directly to the element's className propertyusing
class-name.bind="...."or
class-name.one-time="...".This will be marginally faster but can add up over a lot of bindings.为了兼容其它的库,也可以用classList.add(...)添加class。这是default添加class的方法。也可以选择不用default方法,用
class-name.bind="...."or
class-name.one-time="..."来添加多个绑定的class。
2.Style
You can bind a css string or object to an element'sstyleattribute.Use the
styleattribute'salias,
csswhendoing string interpolation to ensure your application is compatible with Internet Explorer and Edge.可以绑定一个css string变量或者一个object到元素的style属性上。用style的别名。直接用字符串插值添加style属性的时候,不要用style=“”而要用css="",保证兼容。
export class StyleData {styleString: string;styleObject: any;constructor() {this.styleString = 'color: red; background-color: blue';this.styleObject = {color: 'red','background-color': 'blue'};}}
<template><div style.bind="styleString"></div><div style.bind="styleObject"></div></template>illegal的字符串插值:
<template><div style="width: ${width}px; height: ${height}px;"></div></template>合法的字符串插值:
<template><div css="width: ${width}px; height: ${height}px;"></div></template>
相关文章推荐
- What does the CS_CLASSDC & CS_OWNDC class style do?
- [ASP.NET-VIII] ASP.NET 使用CSS[行内式(style) 嵌入式(class)] + table布局前端控件I
- 前端框架Aurelia - Binding Radios
- 前端框架Aurelia —— 路由Router
- 前端框架Aurelia - Value Converter
- 发现:新标签 style="width:100px" class="" 与 旧 width="100px" 有一点不同。
- 前端学习 -- Html&Css -- 框架集
- 前端框架Aurelia - 数据绑定bind(二)
- 前端框架Aurelia - 数据绑定bind(一)
- 前端框架Aurelia - GlobalResources()
- <s:textfield name="number" value="%{#student.number}" cssClass="InputStyle"/>
- 【4Large-Style】前端框架设计——Button 的设计思路
- Vue.js-----轻量高效的MVVM框架(六、Class与Style绑定)
- 前端框架Aurelia - Binding Checkbox
- 【4Large-Style】前端框架设计——Button 的设计思路
- JNI中用 javah.exe 产生头JNI-Style文件出现错误:无法访问 <class> 未找到 <class> 的类文件
- [React] React Router: activeStyle & activeClassName
- 【4Large-Style】前端框架设计——Button 的设计思路
- 前端框架Aurelia - Delegate vs Trigger
- 前端框架Aurelia - feature()