模板引擎---template的简单使用

（1）art-template的实现步骤

（1）导入template

（2）定义数据

（3）定义模板

（4）调用template

（5）渲染HTML结构

（2）模板引擎的语法

template（'模板的Id',需要渲染的数据对象）

（3）其简单的使用

    <div class="box"></div>
--------------------------------------------------------------

  <script type="text/html" id="user">
    <h1>{{name}}--------------{{age}}</h1>
  </script>
--------------------------------------------------------------

  <script>
    //（1） 定义数据
    let data = {
      name: 'zs',
      age: 12
    }

    //（3）调用template
    let userhtml = template('user', data)
    console.log(userhtml);

    //（5）渲染到页面
    $('.wocao').html(userhtml)
  </script>

（4）模板语法---简单条件输出

实现条件输出，可以使用大胡子{{}}中包裹   if  …… else if ……  else语法



代码的实现

    <div class="box"> </div>


  <!-- ---------------------------------------- -->


  <script type="text/html" id="user">
    {{if flag === 1}}
    这是1
    {{else if flag===2}}
    这是2
    {{/if}}
  </script>


  <!-- ------------------------------------------ -->


  <script>
    let data = {
      flag: 2
    }
    //（3）调用template
    let userhtml = template('user', data)
    console.log(userhtml);

    //（5）渲染到页面
    $('.wocao').html(userhtml)
  </script>

 （5）模板语法---循环输出

语法

（1）当要循环时，可以在{{}}内，通过each进行循环

（2）使用 $index 来遍历索引， $value来遍历当前的值



用法

  <div class="box"></div>


  <!-- ---------------------------------------- -->

  <script type="text/html" id="user">
    <ul>
      {{each hobby}}
      <li>索引号：{{$index}}----------内容是：{{$value}}</li>
      {{/each}}
    </ul>
  </script>


  <!-- ------------------------------------------ -->


  <script>
    let data = {
      flag: 2,
      hobby: ['吃饭', '睡觉', '刷抖音', '写代码']
    }


    let userhtml = template('user', data)
    console.log(userhtml);

    $('.wocao').html(userhtml)
  </script>

（6）就到这里吧~~~，感谢！