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代码:
<div id="container"></div> <script type="text/html" id="indexmain"> <!-- 商品列表 --> <ul> {{each list item}} <li> <a href="javascript:;" rel="external nofollow" > {{if item.good_sign==1}} <div class="ico-comm i-mark"> <span>新品</span> </div> {{else if item.good_sign==2}} <div class="ico-comm i-mark"> <span>热卖</span> </div> {{/if}} <img src="https://www.atool.online/article/{{item.good_img}}" alt="商品图"> </a> </li> {{/each}} </ul> </script>
效果图:
模板引擎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: '<h1>我是标题</h1>' }) console.log(html);
一、输出数据
1.标准语法
<p>{{ name }}</p> //使用大括号的方式输出数据 <p>{{1+1}}</p>//在括号内可以实现基本运算 <p>{{1+1==2?'相等':'不相等'}}</p>//在括号内可以实现三目运算 {{@ content }}//如果要引入包含html标签的数据 标准语法必须在中括号前加上@
2.原始语法
<p><%=name%></p> <p><%=1+1==2?'相等':'不相等'%></p> <p><%- content%></p>//要引入包含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.标准语法
<ul> {{each users}}//users 就是被循环的数据 <li>{{$value.name}}</li>//value就是循环得出的数据 <li>{{$value.age}}</li> <li>{{$value.sex}}</li> {{/each}} </ul>
2.原始语法
<ul> //跟if语句的原始语法一样 其实也是把整个for循环语句用<%%>包含起来 然后for(){%><%} 里面js的for怎么写 这里还是怎么写 <% for(var i=0;i<users.length;i++){%> <li><%=users[i].name%></li> <li><%=users[i].age%></li> <li><%=users[i].sex%></li> <%} %> </ul>
四、子模板
1.标准语法
{{include './common/header.art'}} <div>{{msg}}</div> {{include './common/footer.art'}}
2.原始语法
<% include ('./common/header.art')%> <div><%=msg%></div> <% include ('./common/footer.art')%>
以上为个人经验,希望能给大家一个参考,也希望大家多多支持阿兔在线工具。