<em>Mac</em>Book项目 2009年学校开始实施<em>Mac</em>Book项目,所有师生配备一本<em>Mac</em>Book,并同步更新了校园无线网络。学校每周进行电脑技术更新,每月发送技术支持资料,极大改变了教学及学习方式。因此2011
2021-06-01 09:32:01
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的基本使用(判斷語句、迴圈、子模板的使用) //資料來源 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標籤的資料,就要把=號換成-
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{%>年齡不符合要求<%} %>
//資料來源 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')%>
以上為個人經驗,希望能給大家一個參考,也希望大家多多支援it145.com。
相關文章
<em>Mac</em>Book项目 2009年学校开始实施<em>Mac</em>Book项目,所有师生配备一本<em>Mac</em>Book,并同步更新了校园无线网络。学校每周进行电脑技术更新,每月发送技术支持资料,极大改变了教学及学习方式。因此2011
2021-06-01 09:32:01
综合看Anker超能充系列的性价比很高,并且与不仅和iPhone12/苹果<em>Mac</em>Book很配,而且适合多设备充电需求的日常使用或差旅场景,不管是安卓还是Switch同样也能用得上它,希望这次分享能给准备购入充电器的小伙伴们有所
2021-06-01 09:31:42
除了L4WUDU与吴亦凡已经多次共事,成为了明面上的厂牌成员,吴亦凡还曾带领20XXCLUB全队参加2020年的一场音乐节,这也是20XXCLUB首次全员合照,王嗣尧Turbo、陈彦希Regi、<em>Mac</em> Ova Seas、林渝植等人全部出场。然而让
2021-06-01 09:31:34
目前应用IPFS的机构:1 谷歌<em>浏览器</em>支持IPFS分布式协议 2 万维网 (历史档案博物馆)数据库 3 火狐<em>浏览器</em>支持 IPFS分布式协议 4 EOS 等数字货币数据存储 5 美国国会图书馆,历史资料永久保存在 IPFS 6 加
2021-06-01 09:31:24
开拓者的车机是兼容苹果和<em>安卓</em>,虽然我不怎么用,但确实兼顾了我家人的很多需求:副驾的门板还配有解锁开关,有的时候老婆开车,下车的时候偶尔会忘记解锁,我在副驾驶可以自己开门:第二排设计很好,不仅配置了一个很大的
2021-06-01 09:30:48
不仅是<em>安卓</em>手机,苹果手机的降价力度也是前所未有了,iPhone12也“跳水价”了,发布价是6799元,如今已经跌至5308元,降价幅度超过1400元,最新定价确认了。iPhone12是苹果首款5G手机,同时也是全球首款5nm芯片的智能机,它
2021-06-01 09:30:45