ES6模板语法

男娘i 2022-08-28 07:57 254阅读 0赞

**一.模板语法**

**      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);
    }

**效果：**

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16][]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/6ba441674a5b4e058806752921bd4814.png

发表评论取消回复

表情：

评论列表（有 0 条评论，254人围观）

还没有评论，来说两句吧...

相关阅读

相关 ES6基础语法

（1）变量定义let let和var的区别 <SCript> { var a = 123;

野性酷女/ 2022年12月06日 12:42/ 0 赞/ 256 阅读

相关【笔记】es6语法

es6 1. Symbol:唯一性，相同的也是唯一的。 2. 声明变量 3. 解构赋值

àì夳堔傛蜴生んèń/ 2022年10月04日 14:55/ 0 赞/ 238 阅读

相关 es6基础语法

1、语法标准：开发者执行者（node.js /浏览器） 1.安装nodejs 2.查看版本 3.第一个程序 1）nodejs交互界面

绝地灬酷狼/ 2022年09月11日 12:30/ 0 赞/ 301 阅读

相关 ES6模板语法

一.模板语法 1.换行 let str3 = ` <div>王昭君</div> <div>貂蝉</div>

男娘i/ 2022年08月28日 07:57/ 0 赞/ 255 阅读

相关 Es6语法

1.var要比let的位高,作用域要大 2.let的作用范围很小很小 3.若果在函数内定义一个var变量,在函数外是不能被访问的. function user()

素颜马尾好姑娘i/ 2022年05月09日 06:20/ 0 赞/ 392 阅读

相关 es6基本语法

> 为了更好地学习语法和之后的vue，es6是必不可少的一步！ <!DOCTYPE html> <html lang="en"> <head

傷城~/ 2022年03月06日 02:44/ 0 赞/ 358 阅读

相关 ES6语法基础

一，let 与 const ES2015(ES6) 新增加了两个重要的 JavaScript 关键字: let 和 const。 let 声明的变量只在 let 命令所

布满荆棘的人生/ 2021年09月21日 09:44/ 0 赞/ 570 阅读

相关 ES6相关语法

[es6.ruanyifeng.com/\docs/intro][es6.ruanyifeng.com_docs_intro] 1、let和const命令 let

逃离我推掉我的手/ 2021年09月20日 08:30/ 0 赞/ 452 阅读

相关 ES6 展开语法

> 展开语法(Spread syntax), 可以在函数调用/数组构造时, 将数组表达式或者字符串在语法层面展开. > > 还可以在构造字面量对象时, 将对象表达式按

电玩女神/ 2021年09月18日 07:58/ 0 赞/ 438 阅读

相关 ES6语法

ES6语法 Tags: javascript const 与 let 变量使用`var`带来的麻烦: function getClothing(isC

野性酷女/ 2021年06月24日 16:09/ 0 赞/ 630 阅读