記錄自己遇到的難點(diǎn)總結(jié)，大佬請(qǐng)繞道~

如題，查詢度娘發(fā)現(xiàn)art-template相關(guān)資料甚少，還都是一些很基礎(chǔ)的問(wèn)題，然鵝出了另一個(gè)很基礎(chǔ)的問(wèn)題，這在原生分分鐘可以，還是對(duì)art-template模板了解的少，所以費(fèi)了點(diǎn)時(shí)間，想了好久解決不了，感謝后臺(tái)同事（作為一個(gè)前端手動(dòng)捂臉），也只能說(shuō)自己太菜（再次手動(dòng)捂臉），好了，上代碼~

先說(shuō)下需求與數(shù)據(jù)，因?yàn)槭菙?shù)據(jù)遷移，后臺(tái)處理數(shù)據(jù)有些麻煩，前端處理更方便一些，數(shù)據(jù)格式如下，需求是相同column，僅顯示一次，其他數(shù)據(jù)正常循環(huán)。

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

模板數(shù)據(jù)里面，還做了隔行變色的判斷，但困惑自己的點(diǎn)是：如何做到當(dāng)前數(shù)據(jù)與上次數(shù)據(jù)的比對(duì)，沒(méi)想到還能這樣寫(xiě)：list[$index-1].column，還是我對(duì)art-template不了解呀，上代碼~

<script type="text/html" id="testBox"><ul>{{ each list }}{{if $index == 0 }}<h1><b>歸類(lèi)：</b>{{ $value.column }}</h1>{{ else }}{{ if(list[$index-1].column != $value.column) }} <h1><b>歸類(lèi)：</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>內(nèi)容：</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>

效果如下：

?

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。