記錄自己遇到的難點總結，大佬請繞道~

如題，查詢度娘發現art-template相關資料甚少，還都是一些很基礎的問題，然鵝出了另一個很基礎的問題，這在原生分分鐘可以，還是對art-template模板了解的少，所以費了點時間，想了好久解決不了，感謝后臺同事（作為一個前端手動捂臉），也只能說自己太菜（再次手動捂臉），好了，上代碼~

先說下需求與數據，因為是數據遷移，后臺處理數據有些麻煩，前端處理更方便一些，數據格式如下，需求是相同column，僅顯示一次，其他數據正常循環。

{"list": [{"column": "美食","title": "宮保雞丁","year": "2020","content": "材料準備，將雞胸肉用刀背稍稍拍松，然后切塊備用；花生仁去皮；蔥切段；干辣椒去籽剪成小段；豆瓣醬剁碎；姜切小片；蒜切末備用。用蛋清、1勺淀粉、料酒將雞胸肉抓勻，腌制十幾分鐘。涼鍋中放入少許油，然后將花生仁放到鍋內。小火炸制花生仁成金黃色撈出晾涼備用。用糖、鹽、香醋、醬油、雞精、玉米淀粉調成汁備用。將鍋燒熱，然后倒入適量食用油。接下來再把雞肉放入鍋中，迅速打散。雞肉變白即可盛出備用。鍋中留少許底油，先放入花椒和干辣椒小火煸炒出香味，再將豆瓣醬和辣椒面倒入鍋中煸炒出紅油，接下來將姜片和蒜末放入鍋中，煸炒出香味。改成大火，將雞丁倒入鍋中，翻炒勻均。將蔥段放入鍋中，翻炒勻均。將調好的汁倒入鍋中燒開。將花生仁倒入鍋中。翻炒勻均后，淋少許香油，即可出鍋。",},{"column": "美食","title": "紅燒帶魚","year": "2020","content": "1、煎。帶魚洗凈晾干，為了保險可以用紙巾把水吸凈。還有一種選擇是裹上面粉，這樣就不會因為有水而很容易崩油了。鍋里下油，燒熱，下魚煎，中間翻一次面，煎到兩面金黃放到一邊備用。2、燒。換新油，放蔥姜蒜，爆香，放帶魚翻炒。放料酒醬油醋，燜一下，放適量的糖和鹽，翻炒幾下，加水，與帶魚平齊。開大火濃縮湯汁，盛盤即可。",},{"column": "美食","title": "酸辣土豆絲","year": "2020","content": "1、土豆去皮，切絲。2、土豆絲放入涼水中洗去多余淀粉。3、干辣椒切小段，大蒜拍碎。4、鍋里加水，燒開，放進土豆絲燙半分鐘，撈出沖冷水，瀝干水分。5、鍋里下油，下花椒小火炸香，撈出花椒。6、倒進干辣椒和大蒜爆鍋大火炒香。7、倒進土豆絲，快速快速翻炒。8、沿鍋邊倒入白醋，醋遇熱大部分酸味揮發，留下醋香。加食鹽和白糖調味。9、全程大火快速翻炒，保證土豆脆爽。出鍋前加入小蔥段即可。",},{"column": "電視劇","title": "《覺醒年代》","year": "2020","content": "重大革命歷史題材電視劇《覺醒年代》由中共北京市委宣傳部、中共安徽省委宣傳部、北京市廣播電視局和安徽省廣播電視局聯合攝制，由北京北廣傳媒影視股份有限公司和安徽華星傳媒投資有限公司承制，由北京北廣傳媒影視股份有限公司、安徽華星傳媒投資有限公司、優酷信息技術（北京）有限公司和上?？祟D文化傳媒有限公司聯合出品。編劇：龍平平，導演：張永新，總制片人：劉國華，主演：于和偉、張桐、侯京健、馬少驊、朱剛日堯、張晚意、曹磊、夏德俊等。",},{"column": "電視劇","title": "《機智的醫生生活》","year": "2020","content": "《機智醫生生活第二季》是一部“季播制”韓劇。《機智醫生生活》第一季在5月底播畢，隨即宣布第二季會在11月開拍。由《請回答系列》、《機智牢房生活》的導演申元浩再次攜手《請回答系列》編劇李祐汀，合作打造。",},{"column": "生活","title": "居家生活小妙招","year": "2020","content": "1.吃不完的檸檬保鮮 將檸檬切成片放入保鮮盒，再淋上蜂蜜，蓋上保險盒，放入冰箱即可。早上起來可以取兩片蜂蜜檸檬，用溫水沖一下，就成了一杯檸檬蜂蜜水。這就是用腌制的方法保存檸檬。2.香蕉皮保養皮鞋 (1)香蕉皮內側把皮鞋擦干凈。香蕉皮內富含丹寧，用來擦鞋，可使鞋面更加光潔。(2)然后馬上用干凈的干布再把鞋擦一遍，皮鞋就會變得超級有光澤。3.酸奶給手背去死皮 將酸奶涂在手背上，用手揉搓就能輕松去死皮，如果往酸奶里再加些鹽和橄欖油，效果會更好。4.延長鮮花花期 在水中滴2-3滴白醋或漂白水，并將花枝斜著剪一刀，插入水中即可。5.去除浴室鏡子的霧氣 把浴室的鏡子或玻璃上擦上洗滌靈水，可以防止鏡子起霧、蒙上水蒸氣。6.去除馬桶污漬 將衛生紙鋪在馬桶有污漬的地方，噴上清潔劑，2分鐘手用水沖掉，馬桶就干凈了。",},{"column": "旅游","title": "北京故宮","year": "2020","content": "北京故宮是中國明清兩代的皇家宮殿，舊稱紫禁城，位于北京中軸線的中心。北京故宮以三大殿為中心，占地面積約72萬平方米，建筑面積約15萬平方米，有大小宮殿七十多座，房屋九千余間。",},{"column": "旅游","title": "上海東方明珠","year": "2020","content": "東方明珠廣播電視塔，簡稱“東方明珠”，位于上海市浦東新區陸家嘴世紀大道1號，地處黃浦江畔，背擁陸家嘴地區現代化建筑樓群，與隔江的外灘萬國建筑博覽群交相輝映，始建于1994年10月1日，是集都市觀光、時尚餐飲、購物娛樂、歷史陳列、浦江游覽、會展演出、廣播電視發射等多功能于一體的上海市標志性建筑之一，為亞洲第一高塔、世界第三高塔。",}] }

模板數據里面，還做了隔行變色的判斷，但困惑自己的點是：如何做到當前數據與上次數據的比對，沒想到還能這樣寫：list[$index-1].column，還是我對art-template不了解呀，上代碼~

<script type="text/html" id="testBox"><ul>{{ each list }}{{if $index == 0 }}<h1><b>歸類：</b>{{ $value.column }}</h1>{{ else }}{{ if(list[$index-1].column != $value.column) }} <h1><b>歸類：</b>{{ $value.column }}</h1>{{ /if }}{{ /if }}{{ if $index % 2 == 0 }}<li>{{ else }}<li class="gray">{{ /if }}<p><b>名稱：</b>{{ $value.title }}</p><p><b>年份：</b>{{ $value.year }}</p><p class="con"><b>內容：</b>{{ $value.content }}</p></li>{{ /each }}</ul> </script>

js就正常使用：

var html = template('testBox', {list: list}) var container = document.querySelector('#test'); container.innerHTML = html;

html:

<div id="test"></div>

效果如下：

?

總結

以上是生活随笔為你收集整理的art-template提取某个重复字段，使其仅显示一次的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。