Update template

master
yutent 2023-09-21 18:27:37 +08:00
parent a5a68001c6
commit 4f45bd7e5a
1 changed files with 45 additions and 10 deletions

@ -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>
`
```