vue实现文章列表

最新推荐文章于 2024-10-12 15:30:21 发布

住汪星球的喵星人

最新推荐文章于 2024-10-12 15:30:21 发布

阅读量3k

点赞数 4

本文链接：https://blog.csdn.net/weixin_43117402/article/details/105559162

版权

本文介绍了如何在Vue中创建文章列表，通过在App.vue中定义数据articleList，并将其单向传递给子组件Article.vue。在子组件中，对接收到的文章对象进行计算属性处理，用于格式化时间和内容，但不直接修改原始数据。

摘要由CSDN通过智能技术生成

现在来尝试做文章列表，完成后是这样的：
在这里插入图片描述
父App.vue

<template>
  <div id="app">
    <!-- 用 v-for 渲染文章列表 -->
    <Article v-for="article in articleList" :key="article.title" :article="article"></Article>
  </div>
</template>

<script>
// 引入组件
import Article from '@/components/Article.vue';

export default {
   
  name: 'app',
  // 注册组件
  components: {
   
    Article
  },
  data: function() {
   
    return {
   
      articleList: [
        {
   
          cover: require('@/assets/images/article-cover-1.jpg'),
          title: '首发！近百位漫画家创作了一本战“疫”漫画，全书免费读',
          time: '2020-02-02 14:40:00',
          content:
            '这个春节与往年大不相同：大人们停止了走亲访友，孩子们被禁止外出玩耍，“口罩”取代“红包”成为正月里的关键词。也许你已经知道了，这些改变与新型冠状病毒有关，也许你还想知道，这讨厌的病毒为什么会突然出现、该怎么打败它，一级小朋友们可以帮什么忙？为了解答你的疑问，《中国少年报》、未来网联手近百位漫画家制作了这本电子漫画书，你应当知道的五件事。'
        },
        {
   
          cover: require('@/assets/images/article-cover-2.jpg'),
          title