ES6模板语法

一.模板语法

        1.换行

let str3 = `
    <div>王昭君</div>
    <div>貂蝉</div>
    <div>妲己</div>
`;

        2.变量、方法、三目

var goods = [
    {
        name: "手机",
        price: 10.00,
        num: 2,
        isPreferential: true,//有优惠
    },
    {
        name: "电脑",
        price: 100.90,
        num: 5,
        isPreferential: false,//无优惠
    },
    {
        name: "ipad",
        price: 50.99,
        num: 3,
        isPreferential: true,//有优惠
    },
];
for (let i = 0; i < goods.length; i++) {
    //创建div
    let odiv = document.createElement("div");
    //赋值类名
    odiv.className = "item";
    //赋值
    odiv.innerHTML = `
        <h3>商品名称：${goods[i].name}</h3>
        <div>单价：${goods[i].price.toFixed(2)}</div>
        <div>数量：${goods[i].num}</div>
        <div>总价：${(goods[i].price * goods[i].num).toFixed(2)}</div>
        <div>${goods[i].isPreferential ? '有优惠' : '无优惠'}</div>
`;
    //插入到页面
    document.querySelector(".shop").appendChild(odiv);
}

效果：