數據綁定

動態綁定數據

1. 建立元素 利用動態建立DOM方法 動態建立DOM對象
   • DOM迴流(reflow):在頁面中某個元素的插入 刪除 位置 大小發生變化 那麼會從新計算其餘元素的位置 這樣很是消耗性能
   • DOM重繪（repaint）:當頁面中的元素背景 字體顏色發生變化時 那麼瀏覽器須要對其進行從新繪製 這種現象稱爲重繪

for(let i = 0; i < ary.length;i++){
    let cur = ary[i];
    let newLi = document.createElement('li');
    newLi.innerHTML = 'name' + cur.name + 'age' + cur.age;
    ul.appendChild(newLi);
}
複製代碼

2. 利用文檔碎片 一個經過DOM API建立的臨時存放DOM元素的容器

let frg = document.createDocumentFragment();  //建立文檔碎片
for(let i = 0; i < ary.length;i++){
    let cur = ary[i];
    let newLi = document.createElement('li');
    newLi.innerHTML = 'name' + cur.name + 'age' + cur.age;
    frg.appendChild(newLi);
}
ul.appendChild(frg);
frg = null; //當插入後 釋放frg內存

複製代碼

3. 拼接字符串 + innerHTML

let str = '';
for(let i = 0;i <ary.length; i ++){
    let cur = ary[i];
    str +='<li>' + 'name' + cur.name + 'age:' + cur.age + '</li>';
}
console.log(str);
ul.innerHTML = str;
複製代碼

4. 模板字符串

let p = ``;
for(let i = 0;i<arr.length;i++){
    let num = arr[i];
    p +=`<li>
    <strong>name:${num.name}</strong>
      <strong>age:${num.age}</strong>
    </li>`
}
ul.innerHTML = p;
複製代碼