JS中的art-template模板如何使用if判斷
更新時間：2022年09月05日 10:27:15 作者：Shawyu_
這篇文章主要介紹了JS中的art-template模板如何使用if判斷，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
JS art-template模板使用if判斷
JS代碼：
?? ?// json數(shù)據(jù)
?? ?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的基本使用(判斷語句、循環(huán)、子模板的使用)
//數(shù)據(jù)來源
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);一、輸出數(shù)據(jù)
1.標準語法
?<p>{{ name }}</p> //使用大括號的方式輸出數(shù)據(jù)
?<p>{{1+1}}</p>//在括號內(nèi)可以實現(xiàn)基本運算
?<p>{{1+1==2?'相等':'不相等'}}</p>//在括號內(nèi)可以實現(xiàn)三目運算
?{{@ content }}//如果要引入包含html標簽的數(shù)據(jù) 標準語法必須在中括號前加上@2.原始語法
?<p><%=name%></p> ?<p><%=1+1==2?'相等':'不相等'%></p> ?<p><%- content%></p>//要引入包含html標簽的數(shù)據(jù)，就要把=號換成-
二、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循環(huán)語句
//數(shù)據(jù)來源
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 就是被循環(huán)的數(shù)據(jù)
? ? ?<li>{{$value.name}}</li>//value就是循環(huán)得出的數(shù)據(jù)
? ? ?<li>{{$value.age}}</li>
? ? ?<li>{{$value.sex}}</li>
? ? ?{{/each}}
? ? ?</ul>2.原始語法
<ul>
//跟if語句的原始語法一樣 ?其實也是把整個for循環(huán)語句用<%%>包含起來 ? 然后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')%>以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
基于javascript實現(xiàn)動態(tài)時鐘效果
這篇文章主要為大家詳細介紹了基于javascript實現(xiàn)動態(tài)時鐘效果的相關(guān)資料，動態(tài)顯示系統(tǒng)當前時間，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-02-02
Javascript 數(shù)組添加 shuffle 方法的實現(xiàn)代碼
PHP 里面有個非常方便的打亂數(shù)組的函數(shù) shuffle() ，這個功能在許多情況下都會用到，但 javascript 的數(shù)組卻沒有這個方法，沒有不要緊，可以擴展一個，自己動手，豐衣足食嘛。2009-09-09
本章將專門介紹與執(zhí)行上下文創(chuàng)建階段直接相關(guān)的最后一個細節(jié)——this是什么？以及它的指向到底是什么，感興趣的朋友跟隨小編一起看看吧2021-04-04
解決layui的table插件無法多層級獲取json數(shù)據(jù)的問題
今天小編就為大家分享一篇解決layui的table插件無法多層級獲取json數(shù)據(jù)的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
要求用js寫一個函數(shù)，對傳入的形如下網(wǎng)址字符串，返回對應的對象。2011-08-08
用Javascript實現(xiàn)錨點(Anchor)間平滑跳轉(zhuǎn)
本文介紹的方法，實現(xiàn)了錨點(Anchor)間平滑跳轉(zhuǎn)，效果非常不錯。2009-09-09
bind()方法主要就是將函數(shù)綁定到某個對象，bind()會創(chuàng)建一個函數(shù)，函數(shù)體內(nèi)的this對象的值會被綁定到傳入bind()第一個參數(shù)的值，當然這是綁定哦，不是像call、apply一樣直接執(zhí)行，apply要執(zhí)行的話還得自己調(diào)用2022-12-12
這篇文章主要為大家詳細介紹了javascript回到頂部特效，具有一定的參考價值，感興趣的朋友可以參考一下2016-07-07
作用域是JavaScript最重要的概念之一，想要學好JavaScript就需要理解JavaScript作用域和作用域鏈的工作原理。今天這篇文章對JavaScript作用域鏈作簡單的介紹，希望能幫助大家更好的學習JavaScript。2014-05-05![attachEvent的使用方法與傳遞參數(shù)[IE|firefox]](http://img.jbzj.com/images/xgimg/bcimg9.png)
attachEvent的使用方法與傳遞參數(shù)[IE|firefox]
attachEvent的使用方法與傳遞參數(shù)[IE|firefox]...2007-05-05