循環(huán)

可以通過(guò)each屬性來(lái)達(dá)到標(biāo)簽循環(huán)，如下：

• { title }

this.items = [

{ title: 'First item', done: true },

{ title: 'Second item' },

{ title: 'Third item' }

]

在上面的代碼中，具有each屬性的元素，會(huì)被重復(fù)N次，N等于items數(shù)組的元素?cái)?shù)量；

當(dāng)你通過(guò)push，slice，splice改變數(shù)組數(shù)量的時(shí)候，DOM元素也會(huì)隨之變化

上下文

所有被循環(huán)的元素，都擁有自己的上下文，請(qǐng)看如下代碼：

{ title }

Remove

this.items = [ { title: 'First' }, { title: 'Second' } ]

remove(event) {

// looped item

var item = event.item

// index on the collection

var index = this.items.indexOf(item)

// remove from collection

this.items.splice(index, 1)

}

在被循環(huán)的元素內(nèi)部，想訪問(wèn)數(shù)組子對(duì)象的屬性，可以直接訪問(wèn)，如：{title}

如果想訪問(wèn)父元素的屬性，就需要加上parent，比如：{ parent.remove }，因?yàn)樯舷挛牟灰恢铝?/p>

在 parent.remove方法中，可以使用event.item對(duì)象訪問(wèn)當(dāng)前數(shù)組元素的屬性，

parent.remove方法執(zhí)行完之后，會(huì)執(zhí)行父組件的update事件；

當(dāng)在一個(gè)父組件實(shí)例執(zhí)行this.update()的時(shí)候 ，該父組件下的所有子組件都會(huì)更新，

自定義的循環(huán)標(biāo)簽

一個(gè)自定義的標(biāo)簽也可以被標(biāo)記為循環(huán)標(biāo)簽，如下：

你可以通過(guò)data="{ this }"把當(dāng)前標(biāo)簽的實(shí)例傳遞給todo-item的實(shí)例

簡(jiǎn)單數(shù)組循環(huán)

循環(huán)的數(shù)組元素不一定是對(duì)象，如下：

{ i }: { name }

this.arr = [ true, 110, Math.random(), 'fourth']

對(duì)象屬性循環(huán)

與簡(jiǎn)單數(shù)組循環(huán)相對(duì)，下面的代碼是對(duì)象屬性循環(huán)

{ name } = { value }

this.obj = {

key1: 'value1',

key2: 1110.8900,

key3: Math.random()

}

注意，對(duì)象屬性循環(huán)有性能問(wèn)題，不推薦使用；

riotjs是通過(guò)JSON.stringify來(lái)判斷對(duì)象是否有變更，以此來(lái)決定是否要更新HTML元素

key屬性

你可以在循環(huán)標(biāo)簽的時(shí)候，使用key屬性

• { user.name }

this.users = [

{ name: 'Gian', id: 0 },

{ name: 'Dan', id: 1 },

{ name: 'Teo', id: 2 }

]

你甚至可以給key屬性賦值為方法

• { user.name }

this.users = [

{ name: 'Gian', id() { return 0 } },

{ name: 'Dan', id() { return 1 } },

{ name: 'Teo', id() { return 2 } }

]

虛擬標(biāo)簽

有的時(shí)候，你需要循環(huán)多個(gè)標(biāo)簽，但是你又不想在這多個(gè)標(biāo)簽上面套一個(gè)wrapper，

這個(gè)時(shí)候你就可以用虛擬標(biāo)簽，代碼如下：

{item.key}

{item.value}

你可以在虛擬標(biāo)簽上添加if 或者 data-is屬性

Show me with no wrapper on condition

HTML元素標(biāo)簽

你可以把HTML元素當(dāng)作riot標(biāo)簽使用，但只能在body內(nèi)這么用，如下：

riot.mount('my-list')

當(dāng)你碰到這種情況的時(shí)候，你需要使用data-is屬性

foo

bar

本系列寫完了，祝好！

總結(jié)

以上是生活随笔為你收集整理的js循环解析html标签,riot.js教程【六】循环、HTML元素标签的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。