Artifact
cb23f002279ef118f5c8e2cf0194ecac1aa7d22816b22493852e24ac265db262:
0000: 3c 6c 6f 6f 70 2d 63 6f 6e 64 69 74 69 6f 6e 61 <loop-conditiona
0010: 6c 3e 0a 20 20 3c 64 69 76 20 6f 6e 63 6c 69 63 l>. <div onclic
0020: 6b 3d 7b 20 63 68 61 6e 67 65 20 7d 20 65 61 63 k={ change } eac
0030: 68 3d 7b 20 69 74 65 6d 73 20 7d 20 69 66 3d 7b h={ items } if={
0040: 20 76 61 6c 75 65 20 3c 3d 20 32 20 7d 3e 0a 20 value <= 2 }>.
0050: 20 20 20 3c 6c 6f 6f 70 2d 63 6f 6e 64 69 74 69 <loop-conditi
0060: 6f 6e 61 6c 2d 6e 65 73 74 65 64 2d 69 74 65 6d onal-nested-item
0070: 20 76 61 6c 75 65 3d 7b 76 61 6c 75 65 7d 20 3e value={value} >
0080: 3c 2f 6c 6f 6f 70 2d 63 6f 6e 64 69 74 69 6f 6e </loop-condition
0090: 61 6c 2d 6e 65 73 74 65 64 2d 69 74 65 6d 3e 0a al-nested-item>.
00a0: 20 20 3c 2f 64 69 76 3e 0a 20 20 3c 61 72 74 69 </div>. <arti
00b0: 63 6c 65 20 72 65 66 3d 22 61 72 74 69 63 6c 65 cle ref="article
00c0: 22 20 65 61 63 68 3d 7b 20 69 74 65 6d 73 20 7d " each={ items }
00d0: 20 69 66 3d 7b 20 69 74 65 6d 73 2e 6c 65 6e 67 if={ items.leng
00e0: 74 68 20 7d 3e 0a 20 20 20 20 69 74 65 6d 0a 20 th }>. item.
00f0: 20 3c 2f 61 72 74 69 63 6c 65 3e 0a 20 20 3c 6c </article>. <l
0100: 6f 6f 70 2d 63 6f 6e 64 69 74 69 6f 6e 61 6c 2d oop-conditional-
0110: 69 74 65 6d 20 6f 6e 63 6c 69 63 6b 3d 7b 20 63 item onclick={ c
0120: 68 61 6e 67 65 20 7d 20 65 61 63 68 3d 7b 20 69 hange } each={ i
0130: 74 65 6d 73 20 7d 20 69 66 3d 7b 20 76 61 6c 75 tems } if={ valu
0140: 65 20 3c 3d 20 32 20 7d 20 76 61 6c 75 65 3d 7b e <= 2 } value={
0150: 20 76 61 6c 75 65 20 7d 3e 0a 20 20 3c 2f 6c 6f value }>. </lo
0160: 6f 70 2d 63 6f 6e 64 69 74 69 6f 6e 61 6c 2d 69 op-conditional-i
0170: 74 65 6d 3e 0a 0a 20 20 3c 66 6f 6f 74 65 72 3e tem>.. <footer>
0180: 0a 20 20 20 20 3c 6c 6f 6f 70 2d 63 6f 6e 64 69 . <loop-condi
0190: 74 69 6f 6e 61 6c 2d 6e 65 73 74 65 64 2d 69 74 tional-nested-it
01a0: 65 6d 20 65 61 63 68 3d 7b 20 69 74 65 6d 73 20 em each={ items
01b0: 7d 20 69 66 3d 7b 20 66 61 6c 73 65 20 7d 3e 3c } if={ false }><
01c0: 2f 6c 6f 6f 70 2d 63 6f 6e 64 69 74 69 6f 6e 61 /loop-conditiona
01d0: 6c 2d 6e 65 73 74 65 64 2d 69 74 65 6d 3e 0a 20 l-nested-item>.
01e0: 20 3c 2f 66 6f 6f 74 65 72 3e 0a 0a 20 20 74 68 </footer>.. th
01f0: 69 73 2e 69 74 65 6d 73 20 3d 20 5b 7b 76 61 6c is.items = [{val
0200: 75 65 3a 20 31 7d 2c 7b 76 61 6c 75 65 3a 20 32 ue: 1},{value: 2
0210: 7d 2c 20 7b 76 61 6c 75 65 3a 20 33 20 7d 5d 0a }, {value: 3 }].
0220: 0a 20 20 63 68 61 6e 67 65 28 29 20 7b 0a 20 20 . change() {.
0230: 20 20 74 68 69 73 2e 69 74 65 6d 73 20 3d 20 5b this.items = [
0240: 7b 76 61 6c 75 65 3a 20 31 7d 2c 20 7b 76 61 6c {value: 1}, {val
0250: 75 65 3a 20 32 7d 2c 20 7b 76 61 6c 75 65 3a 20 ue: 2}, {value:
0260: 33 7d 2c 20 7b 76 61 6c 75 65 3a 20 34 7d 2c 20 3}, {value: 4},
0270: 7b 76 61 6c 75 65 3a 20 32 7d 2c 20 7b 20 76 61 {value: 2}, { va
0280: 6c 75 65 3a 20 31 20 7d 5d 0a 20 20 20 20 74 68 lue: 1 }]. th
0290: 69 73 2e 75 70 64 61 74 65 28 29 0a 20 20 7d 0a is.update(). }.
02a0: 0a 3c 2f 6c 6f 6f 70 2d 63 6f 6e 64 69 74 69 6f .</loop-conditio
02b0: 6e 61 6c 3e 0a 3c 6c 6f 6f 70 2d 63 6f 6e 64 69 nal>.<loop-condi
02c0: 74 69 6f 6e 61 6c 2d 69 74 65 6d 3e 0a 20 20 3c tional-item>. <
02d0: 70 3e 7b 20 6f 70 74 73 2e 76 61 6c 75 65 20 7d p>{ opts.value }
02e0: 3c 2f 70 3e 0a 3c 2f 6c 6f 6f 70 2d 63 6f 6e 64 </p>.</loop-cond
02f0: 69 74 69 6f 6e 61 6c 2d 69 74 65 6d 3e 0a 0a 3c itional-item>..<
0300: 6c 6f 6f 70 2d 63 6f 6e 64 69 74 69 6f 6e 61 6c loop-conditional
0310: 2d 6e 65 73 74 65 64 2d 69 74 65 6d 3e 0a 20 20 -nested-item>.
0320: 3c 70 3e 7b 20 6f 70 74 73 2e 76 61 6c 75 65 20 <p>{ opts.value
0330: 7d 3c 2f 70 3e 0a 3c 2f 6c 6f 6f 70 2d 63 6f 6e }</p>.</loop-con
0340: 64 69 74 69 6f 6e 61 6c 2d 6e 65 73 74 65 64 2d ditional-nested-
0350: 69 74 65 6d 3e 0a item>.