前端模板引擎

最新推荐文章于 2025-04-25 17:49:00 发布

喵_美

最新推荐文章于 2025-04-25 17:49:00 发布

阅读量1k

点赞数 14

分类专栏：前端学习笔记文章标签：前端

本文链接：https://blog.csdn.net/qq_34708564/article/details/145684794

版权

前言

正常渲染拿到数据后渲染，三步走：格式化数据、编译模板、渲染数据
如下例
在这里插入图片描述

  <!DOCTYPE html>
  <html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米商城</title>
  </head>
  <style>
    * {
     
      margin: 0;
      padding: 0;
    }

    body,
    html {
     
      background-color: whitesmoke;
      font-size: 12px;
    }

    ul {
     
      list-style: none;
    }

    li {
     
      display: inline-block;
      padding: 0 10px;
      background: white;
    }

    h3 {
     
      text-align: center;
    }

    p {
     
      text-align: center;
    }

    .title {
     
      font-size: 16px;
      font-weight: 400;
      color: #333;
      line-height: 42px;
    }

    .desc {
     
      color: #b0b0b0;
    }

    .price {
     
      color: #444;
      line-height: 58px;
    }

    span {
     
      color: red;
    }
  </style>

  <body>
    <ul id="product-list">
      <!-- <li>
        <img src="img/1.webp" alt="">
        <h3 class="title">小米10青春版5G</h3>
        <p class="desc">50倍潜望式驾驶员/轻薄5G手机</p>
        <p class="price"><span>2099</span>元起</p>
      </li>
      <li>
        <img src="img/2.webp" alt="">
        <h3 class="title">小米10</h3>
        <p class="desc">骁龙865/1亿预期相机</p>
        <p class="price"><span>3799</span>元起</p>
      </li>
      <li>
        <img src="img/3.webp" alt="">
        <h3 class="title">Redmi K30 Pro</h3>
        <p class="desc">双模5G，骁龙865，投放全面屏</p>
        <p class="price"><span>2699</span>元起</p>
      </li>
      <li>
        <img src="img/4.webp" alt="">
        <h3 class="title">Redmi K30 Pro准版</h3>
        <p class="desc">双模5G，骁龙865，投放全面屏</p>
        <p class="price"><span>3499</span>元起</p>
      </li> -->
    </ul>


    <script>

      const productData = {
     
        title: '小米手机',
        list: [
          {
     
            productImgUrl: 'img/1.webp',
            productCUID: '088722478239',
            productTitle: 'PTD16-小米10青春版5G',
            productDesc: '50倍潜望式驾驶员/轻薄5G手机',
            productPrice: 209000,
            productCount: 999
          }, {
     
            productImgUrl: 'img/2.webp',
            productCUID: '088789478639',
            productTitle: 'PTD16-小米10', //
            productDesc: '骁龙865/1亿预期相机',
            productPrice: 379000, //3790.50   一般不会直接传代小数的数字，因为前端的计算是有问题的，一般数据是乘百发送，或者发送字符串自己转换
            productCount: 999  
          }, {
     
            productImgUrl: 'img/3.webp',
            productCUID: '088789478339',
            productTitle: 'PTD16-Redmi K30 Pro',
            productDesc: '双模5G，骁龙865，投放全面屏',
            productPrice: 269900,
            productCount: 0
          }, {
     
            productImgUrl: 'img/4.webp',
            productCUID: '088789471239',
            productTitle: 'PTD16-Redmi K30 Pro准版',

最低0.47元/天解锁文章