您现在的位置是:网站首页> 编程资料编程资料

JS中的art-template模板如何使用if判断_javascript技巧_

2023-05-24 416人已围观

简介 JS中的art-template模板如何使用if判断_javascript技巧_

JS art-template模板使用if判断

JS代码:

    // json数据     var json=[         {             "id": 1,             "good_sign": 2,             "good_img": "http://dummyimage.com/460x440/ee79f2/79f2cb.png&text=商品\n"         },         {             "id": 2,             "good_sign": 1,             "good_img": "http://dummyimage.com/460x440/f2a779/8479f2.png&text=商品\n"         },         {             "id": 3,             "good_sign": 0,             "good_img": "http://dummyimage.com/460x440/91f279/f279b4.png&text=商品\n"         },         {             "id": 4,             "good_sign": 1,             "good_img": "http://dummyimage.com/460x440/79d7f2/f2e979.png&text=商品\n"         }     ]     // 渲染json     $("#container").html(template("indexmain",json));

HTML代码:

效果图:

在这里插入图片描述

模板引擎art-template的基本使用

art-template的基本使用(判断语句、循环、子模板的使用) //数据来源 const template = require('art-template'); const path = require('path'); const views = path.join(__dirname, 'views', '02.art'); const html = template(views, {     name: '张三',     age: 17,     content: '

我是标题

' }) console.log(html);

一、输出数据

1.标准语法

 

{{ name }}

//使用大括号的方式输出数据  

{{1+1}}

//在括号内可以实现基本运算  

{{1+1==2?'相等':'不相等'}}

//在括号内可以实现三目运算  {{@ content }}//如果要引入包含html标签的数据 标准语法必须在中括号前加上@

2.原始语法

 

<%=name%>

 

<%=1+1==2?'相等':'不相等'%>

 

<%- content%>

//要引入包含html标签的数据,就要把=号换成-

二、if判断语句

1.标准语法

      {{if age>18}} 年龄大于18       {{else if age<15}}年龄小于15       {{else}}年龄不符合要求       {{/if}}

2.原始语法

//其实就是先用<%%>把整个判断语句包含起来  然后if(){%><%}else if(){%><%}else{%><%}       <% if(age>18){%>       年龄大于18       <%}       else if(age<15){%>年龄小于15<%}       else{%>年龄不符合要求<%}       %>

三、for循环语句

//数据来源 const template = require('art-template'); const path = require('path'); const views = path.join(__dirname, 'views', '03.art'); const html = template(views, {     users: [{         name: '张三',         age: 20,         sex: '男'     }, {         name: '李四',         age: 30,         sex: '男'     }, {         name: '玛丽',         age: 15,         sex: '女'     }] }); console.log(html);

1.标准语法

   
         {{each users}}//users 就是被循环的数据      
  • {{$value.name}}
  • //value就是循环得出的数据      
  • {{$value.age}}
  •      
  • {{$value.sex}}
  •      {{/each}}      

2.原始语法

    //跟if语句的原始语法一样  其实也是把整个for循环语句用<%%>包含起来   然后for(){%><%}  里面js的for怎么写  这里还是怎么写         <% for(var i=0;i        
  • <%=users[i].name%>
  •        
  • <%=users[i].age%>
  •        
  • <%=users[i].sex%>
  •         <%} %>      

四、子模板

1.标准语法

{{include './common/header.art'}} 
{{msg}}
{{include './common/footer.art'}}

2.原始语法

<% include ('./common/header.art')%>
<%=msg%>
<% include ('./common/footer.art')%>

以上为个人经验,希望能给大家一个参考,也希望大家多多支持。

-六神源码网