Omi 循环遍历.pdfVIP

Omi 循环遍历 循环遍历 ⽅式⼀ class List extends Omi.Component { constructor(data) { super(data); } render(){ return `div div o-repeat= item in items o-if= item.show {{$index}}- {{item.text}} /div /div` } } Omi.render(new List({ items: [ { text: Omi, show : true }, { text: dntzhang, show : true }, { text: AlloyTeam} ] }), body ,true); 可以看到遍历的时候可以加上o-if进⾏条件判断⽤来过滤掉show不等于true的项。 点击这⾥→ 线试试 ⽅式⼆ 既然ES6+ 了，当然可以使⽤${ }以及Array的map⽅法: class List extends Omi.Component { constructor(data) { super(data); } render() { return `div ul ${this.data.items.map(item = `li id= ${item.id} ${item.text}/li` ).join()} /ul /div`; } } Omi.render(new List({ items: [ {id: 1, text: Omi}, {id: 2, text: dntzhang}, {id: 3, text: AlloyTeam} ] }), body ); 点击这⾥→ 线试试 如果想 循环⾥加些判断呢？⽐如需要把id为偶数的隐藏起来: render() { return `div ul ${this.data.items.map(item = `li style= display :${item.id%2===0?none:bl ).join()} /ul /div`; } 所以模板字符串还是⾮常⽅便，随着ES继续发展下去，模板引擎估计会慢慢消失。所 以omi提供了 omi .lite .j s 版本不包含任何模板引擎。 ⽅式三 class List extends Omi.Component { constructor(data) { super(data); } render () { return `div ul {{#items}} li id= {{id}} {{text}}/li {{/items}} /ul /div`; } } Omi.render(new List({ items: [ {id: 1, text: Omi}, {id: 2, text: dntzhang}, {id: 3, text: AlloyTeam} ] }), body ); mustache .j s更详细的循