组件化开发—用v-for列表渲染指令进数组数据的分发
父组件分发数据到子组件中,如果分发的数据是一个数组,我们使用v-for列表渲染指令进数据的分发
1、创建子组件
let panelTpl = { template:'#panel' }
2、根组件申明
let vm = new Vue({
el: '#app',
data: {
list: [{
title: '习近平总书记到过的红色圣地之山东篇',
des: '山东是革命老区,底蕴深厚的传统文化与红色基因叠加,造就了这方热土奋勇向前的强大力量。',
addtime: '2021-05-26 08:22:16'
}, {
title: '百集文献纪录片 《山河岁月》',
des: '由中央广播电视总台出品的百集文献纪录片《山河岁月》5月23日在央视综合频道和纪录频道播出第十二集。第十二集《无言的丰碑》讲述了大革命失败后中国共产党在隐秘战线同敌人斗争的历史。',
addtime: '2021-05-26 08:22:16'
}, {
title: '大湾区 大未来 奋斗百年路 启航新征程',
des: '历史因铭记而永恒,精神因传承而不灭。这一个个红色地标,一座座英雄丰碑,是绵延不绝的记忆,更是一笔传之久远的宝贵财富,他们可歌可泣的事迹,震撼了一代代人的心灵!',
addtime: '2021-05-26 08:22:16'
}]
},
components: {
panelTpl
}
})
3、视图层子组件:
<template id="panel">
<div class="panel">
<div class="panel-header">
<slot name="title">此处显示标题</slot>
</div>
<div class="panel-body">
<slot name="des">此处显示文章</slot>
</div>
<div class="panel-bottom">
<slot name="addtime">此处显示时间</slot>
</div>
</div>
</template>
4、视图层根组件:
<div id="app">
<panel-tpl v-for="(item,index) in list">
<h1 slot="title">{{item.title}}</h1>
<p slot="des">{{item.des}}</p>
<p slot="addtime">{{item.addtime}}</p>
</panel-tpl>
</div>
代码演示:
可以看到标题过长,所以我们可以添加过滤器
1、根组件:
let vm = new Vue({
el: '#app',
data: {
list: [{
title: '习近平总书记到过的红色圣地之山东篇',
des: '山东是革命老区,底蕴深厚的传统文化与红色基因叠加,造就了这方热土奋勇向前的强大力量。',
addtime: '2021-05-26 08:22:16'
}, {
title: '百集文献纪录片 《山河岁月》',
des: '由中央广播电视总台出品的百集文献纪录片《山河岁月》5月23日在央视综合频道和纪录频道播出第十二集。第十二集《无言的丰碑》讲述了大革命失败后中国共产党在隐秘战线同敌人斗争的历史。',
addtime: '2021-05-26 08:22:16'
}, {
title: '大湾区 大未来 奋斗百年路 启航新征程',
des: '历史因铭记而永恒,精神因传承而不灭。这一个个红色地标,一座座英雄丰碑,是绵延不绝的记忆,更是一笔传之久远的宝贵财富,他们可歌可泣的事迹,震撼了一代代人的心灵!',
addtime: '2021-05-26 08:22:16'
}]
},
// 过滤器
filters: {
restrictedText: function (value, maxWidth) {
return value.substring(0, maxWidth) + "...";
}
},
components: {
panelTpl
}
})
2、视图层:
<div id="app">
<panel-tpl v-for="(item,index) in list">
<h1 slot="title">{{item.title | restrictedText(10)}}</h1>
<p slot="des">{{item.des}}</p>
<p slot="addtime">{{item.addtime}}</p>
</panel-tpl>
</div>
代码演示:
评论
匿名评论
隐私政策
你无需删除空行,直接评论以获取最佳展示效果