主要是一个a标签来实现跳转,通过图片接口的图片是否存在来渲染,由于在APP组件中使用关键字item.id来进行循环渲染的,只需要输出标题图片即可。
结果输出如下:
源码:
<template>
<a class="daily-item">
<div class="daily-img" v-if="data.images">
<img :src="imgPath + data.images[0]">
</div>
<div
class="daily-title"
:class="{ noImg: !data.images}">{{ data.title }}</div>
</a>
</template>
<script>
import $ from '../libs/util';
export default {
props: {
data: {
type: Object
}
},
data () {
return {
imgPath: $.imgPath
}
}
}
</script>