说明
This commit is contained in:
parent
fcd9b76ace
commit
26ee741741
23
README.md
23
README.md
@ -85,8 +85,31 @@ const data = ['hello', 'world', 'and', 'you']
|
|||||||
document.body.appendChild(div.w(20).h(20).children([
|
document.body.appendChild(div.w(20).h(20).children([
|
||||||
...data.filter(item => item.length >= 3).map(item => span.text(item))
|
...data.filter(item => item.length >= 3).map(item => span.text(item))
|
||||||
]))
|
]))
|
||||||
|
|
||||||
|
// 也许想要这样做
|
||||||
|
const data = ['hello', 'world', 'and', 'you'].filter(item => item.length >= 3)
|
||||||
|
const items = data.map(item => span.text(item)).map((item, index) => {
|
||||||
|
if (index < 1) item.style.color = '#cc1414'
|
||||||
|
return item
|
||||||
|
})
|
||||||
|
|
||||||
|
document.body.appendChild(div.w(20).h(20).children(items))
|
||||||
```
|
```
|
||||||
|
|
||||||
|
也许想要这样做
|
||||||
|
```javascript
|
||||||
|
import { div, span } from '@laniakeasupercluster/widgets'
|
||||||
|
|
||||||
|
const data = ['hello', 'world', 'and', 'you'].filter(item => item.length >= 3)
|
||||||
|
const items = data.map(item => span.text(item)).map((item, index) => {
|
||||||
|
if (index < 1) item.style.color = '#cc1414'
|
||||||
|
return item
|
||||||
|
})
|
||||||
|
|
||||||
|
document.body.appendChild(div.w(20).h(20).children(items))
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
虽然这与 pug 中 `div.w-8.h-12` 赋予元素 class 名的概念基本相同, 但实际并不会给元素赋予 class 名, 它只是一个方法去设置元素样式, 因为在 js 的实现中过多引入 css 概念是没有意义的(至少目前我这么认为)
|
虽然这与 pug 中 `div.w-8.h-12` 赋予元素 class 名的概念基本相同, 但实际并不会给元素赋予 class 名, 它只是一个方法去设置元素样式, 因为在 js 的实现中过多引入 css 概念是没有意义的(至少目前我这么认为)
|
||||||
|
|
||||||
CSS 的便捷性还有两点, 一是伪元素和伪类(:hover ::after), 一是选择器(div.text#ctx.mix > .cc { width: 12px }), 在js中目前没有很好的实现方法, 此事只能再议
|
CSS 的便捷性还有两点, 一是伪元素和伪类(:hover ::after), 一是选择器(div.text#ctx.mix > .cc { width: 12px }), 在js中目前没有很好的实现方法, 此事只能再议
|
||||||
|
Loading…
Reference in New Issue
Block a user