createElementの使用ケース
OnsenUIのlazy loadを使用する際に使います。
私はまだこれ以外に使用した事がありません。
OnsenUIは、Javascript向けのUIライブラリで、手軽にネイティブアプリライクなUIを実現できます。
createElementを使用する事で、処理の中でHTML要素を動的に生成する事ができます。
属性の指定方法
class: {
foo: true,
bar: false
},
style: {
color: 'red',
fontSize: '14px'
},
attrs: {
id: 'foo',
readonly: true,
modifier: 'quiet' //OnsenUI
},
props: { //Vue.jsを想定
myProp: 'bar'
},
domProps: {
innerHTML: '<span>a</span>',
value: 'text',
placeholder: 'コメントを入力'
},
on: {
click: this.clickHandler //Vue.jsを想定
}
これらはあくまで一例になります。
注意点として、指定するclassは事前に読み込まれている必要があります。
Vue.jsのv-ifとcreateElement
if文、もしくは条件 (三項) 演算子を用いて表現する事ができます。
条件演算子はdivで括った要素の中でも使う事ができるので便利です。
createElement('div', {class: 'a-class'},[
createElement('p', {}, '回答：'),
this.flg == true ? createElement('p', {}, 'はい')
: createElement('div'', {class: 'b-class'},[
createElement('p', {}, 'いいえ'),
createElement('p', {}, '詳細'),
....
])
])
Vue.jsのv-forとcreateElement
createElementの中でも繰り返し要素を描画したい時があります。
そんな時はmapを使います。
createElement('div', {class: 'wrap'}, array.map((item, index) => [
createElement('div', {class: 'item'},[
createElement('img', {attrs: { src: item.src}, class: 'u-image'}, ''),
createElement('p', {class: 'u-name'}, item.name)
])
])
