JS中的art-template模板如何使用if判断

目录

• JS art-template模板使用if判断
• 模板引擎art-template的基本使用
• 一、输出数据
• 二、if判断语句
• 三、for循环语句
• 四、子模板

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')%>

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