ご存知のとおり、テンプレート エンジンはデータをビューに変換するためのソリューションですが、これ以前のソリューションは何でしょうか?
体の構造
<body>
<ul id="list">
</ul>
</body>純粋な DOM メソッド
var arr = [
{"name":"小明","age":12,"sex":"男"},
{"name":"小红","age":11,"sex":"女"},
{"name":"小强","age":13,"sex":"男"}
]
// 纯dom很笨拙 这里只简单演示
// 创建文档碎片 减少往真实dom中添加元素的次数,减少渲染次数 优化性能
const frag = document.createDocumentFragment()
const list = document.querySelector('#list')
for (let i = 0; i < arr.length; i++) {
let li = document.createElement('li')
li.innerHTML = arr[i].name
frag.appendChild(li)
}
list.appendChild(frag)配列の結合方法
テンプレート文字列の前に文字列を折り返すのが非常に面倒なので
したがって、文字列を配列に入力し、配列の Join メソッドを使用して文字列を統合できます。
注: vscode では、alt キーを押したまま複数行カーソルを使用して、ラベルに ' とカンマをすばやく追加します。
var arr = [
{"name":"小明","age":12,"sex":"男"},
{"name":"小红","age":11,"sex":"女"},
{"name":"小强","age":13,"sex":"男"}
]
// 创建文档碎片 减少往真实dom中添加元素的次数,减少渲染次数 优化性能
const frag = document.createDocumentFragment()
const list = document.querySelector('#list')
for (let i = 0; i < arr.length; i++) {
let li = document.createElement('li')
li.innerHTML = [
'<li>',
'<p>'+arr[i].name+'</p>',
'<h2><span>'+arr[i].age+'</span>',
'<span>'+arr[i].sex+'</span>',
'</h2>',
'</li>',
].join('')
frag.appendChild(li)
}
list.appendChild(frag)es6テンプレート文字列メソッド
これは、現在テンプレート以外のエンジンの中で最も便利でもあります。
バッククォートに ${} を追加するだけで変数を操作できます
var arr = [
{"name":"小明","age":12,"sex":"男"},
{"name":"小红","age":11,"sex":"女"},
{"name":"小强","age":13,"sex":"男"}
]
// 纯dom很笨拙 这里只简单演示
// 创建文档碎片 减少往真实dom中添加元素的次数,减少渲染次数 优化性能
const frag = document.createDocumentFragment()
const list = document.querySelector('#list')
for (let i = 0; i < arr.length; i++) {
let li = document.createElement('li')
li.innerHTML = `
<li>${arr[i].name}</li>
<p>已经</p>
<span>${arr[i].age}岁了</span>
<span>性别${arr[i].sex}</span>
`
frag.appendChild(li)
}
list.appendChild(frag)