JS中的art-template模板如何使用if判斷
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="{{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')%>
以上為個人經驗,希望能給大傢一個參考,也希望大傢多多支持WalkonNet。
推薦閱讀:
- Node如何實現在瀏覽器預覽項目的所有圖片詳解
- node.js+express留言板功能實現示例
- 一文帶你瞭解vite對瀏覽器的請求做瞭什麼
- Node.js開發靜態資源服務器
- Nuxt3 佈局layouts和NuxtLayout的使用詳解