使用模板遍历images数组实现图片展示

<script type='text/html' id='tpl-users'>
           {{each list val}}
           <p class='headline'>{{val.title}}</p>
           <p class='hei'>
            <span>{{val.aut_name}}</span>
            <span>{{val.pubdate}}</span>
           </p>
           {{/each}}
    </script>
<p>function news(id) {
let data = new Date()
$.ajax({
type: 'GET',
url: 'http://toutiao.itheima.net/v1_0/articles?channel_id=' + id + '&amp;timestamp=' + data,
success: function (res) {
// 筛选数据
const { results } = res.data;
console.log(48, results);
// 调用template函数
let htmls = template('tpl-users', { list: results })
//渲染数据到页面
$('#title').html(htmls)
// const { images } = results.cover;
console.log(results[4].cover.images);
}
})
}
可以在模板中使用{{each}}遍历images数组，如下所示：</p>
<script type='text/html' id='tpl-users'>
    {{each list val}}
        <p class='headline'>{{val.title}}</p>
        <p class='hei'>
            <span>{{val.aut_name}}</span>
            <span>{{val.pubdate}}</span>
        </p>
        {{each val.cover.images img}}
            <img src='{{img}}' alt=''>
        {{/each}}
    {{/each}}
</script>
<p>在模板中使用{{each}}遍历数组时，需要指定两个参数，第一个参数是要遍历的数组，第二个参数是遍历过程中当前元素的别名。在这个例子中，我们使用了两个{{each}}，第一个遍历了结果数组，第二个遍历了cover.images数组。在{{each}}内部，我们可以使用当前元素的别名来访问它的属性，如{{val.title}}、{{val.aut_name}}等。</p>