天天看点

Vue实战知乎日报开发(6)--item组件

主要是一个a标签来实现跳转,通过图片接口的图片是否存在来渲染,由于在APP组件中使用关键字item.id来进行循环渲染的,只需要输出标题图片即可。

结果输出如下:

Vue实战知乎日报开发(6)--item组件

源码:

<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>