news-list

new-card.vue

<template>
  <a v-link="{ path: '/news-detail/12345' }" class="card">
    <div class="title">{{title}}</div>
    <div class="img"></div>
    <div class="brief">{{brief}}</div>
    <div class="info">
      <div class="category">{{category}}</div>
      <div class="origin">{{origin}}</div>
      <div class="time">{{time}}</div>
    </div>
  </a>
</template>

<script>

export default {
  data() {
    return {
      title: '中国好声音',
      brief: '刘欢',
      category: '灿星',
      origin: '周立波',
      time: '16小时前'
    }
  }
}

</script>

news-list.vue

<template>
  <div class="news-list">
    <news-card v-for="item in items" :item="item" :index="$index"></news-card>
  </div>
</template>

<script>
import Vue from 'vue'
import NewsCard from '../components/Card/NewsCard'

Vue.component('news-card', NewsCard)

export default {
  data() {
    items: [
      {
        title: '中国好声音',
        brief: '刘欢',
        category: '灿星',
        origin: '周立波',
        time: '16小时前'
      },
      {
        title: '中国好声音',
        brief: '刘欢',
        category: '灿星',
        origin: '周立波',
        time: '17小时前'
      },
      {
        title: '中国好声音',
        brief: '刘欢',
        category: '灿星',
        origin: '周立波',
        time: '18小时前'
      },
      {
        title: '中国好声音',
        brief: '刘欢',
        category: '灿星',
        origin: '周立波',
        time: '19小时前'
      },
    ]
  }
}
</script>