Update template
parent
a5a68001c6
commit
4f45bd7e5a
55
template.md
55
template.md
|
@ -239,7 +239,7 @@ class Foo extends Component {
|
|||
对组件内的节点配置动画
|
||||
|
||||
```js
|
||||
class Foo extends {
|
||||
class Foo extends Component {
|
||||
|
||||
render() {
|
||||
// 配置同上
|
||||
|
@ -261,15 +261,50 @@ class Foo extends {
|
|||
|
||||
|
||||
### 双向绑定
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
> 上面提到过, 由于模板机制的原因。框架无法实现内置双向绑定。只能是开发者手动实现。实现的方式, 也比较简单, 就是手动监听一下相应的事件来自动更新属性值即可。
|
||||
|
||||
|
||||
```js
|
||||
class Foo extends Component {
|
||||
|
||||
static props = {
|
||||
value: ''
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`<input value=${this.value} @input=${ev => (this.value = ev.target.value)} >`
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
### 属性绑定之样式设置
|
||||
> `style`和`class`这2种设置样式的属性, 比较特殊, 往往会有多个值, 以及多种条件, 所以框架内置了2个方法`classMap`和`styleMap`, 用于简化绑定设置。
|
||||
|
||||
|
||||
```js
|
||||
|
||||
let classes = classMap({
|
||||
foo: true,
|
||||
bar: this.bar,
|
||||
['goo-' + this.id]: true
|
||||
})
|
||||
let styles = styleMap({
|
||||
width: '888px',
|
||||
height: '200px',
|
||||
backgroundColor: '#f30'
|
||||
})
|
||||
|
||||
html`
|
||||
<div class=${classes} style=${styles}>demo</div>
|
||||
`
|
||||
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
|
Loading…
Reference in New Issue