vue实现文章列表

Vue 实现文章列表

数据准备

在 Vue 中实现文章列表，通常需要一个数组存储文章数据。可以在组件的 data 中定义文章列表数据，或通过 API 从后端获取。

data() {
  return {
    articles: [
      { id: 1, title: 'Vue 入门', content: 'Vue 是一个渐进式框架...' },
      { id: 2, title: 'Vuex 状态管理', content: 'Vuex 是 Vue 的官方状态管理工具...' }
    ]
  }
}

如果从后端获取数据，可以使用 axios 或 fetch 发起请求：

methods: {
  fetchArticles() {
    axios.get('/api/articles')
      .then(response => {
        this.articles = response.data
      })
  }
},
created() {
  this.fetchArticles()
}

模板渲染

使用 v-for 指令循环渲染文章列表，并绑定文章数据到模板中。

<template>
  <div class="article-list">
    <div v-for="article in articles" :key="article.id" class="article-item">
      <h3>{{ article.title }}</h3>
      <p>{{ article.content }}</p>
    </div>
  </div>
</template>

样式优化

为文章列表添加样式，提升用户体验。可以使用 CSS 或预处理器（如 SCSS）美化列表。

.article-list {
  max-width: 800px;
  margin: 0 auto;
}

.article-item {
  padding: 16px;
  margin-bottom: 16px;
  border: 1px solid #eee;
  border-radius: 4px;
}

.article-item h3 {
  margin: 0 0 8px 0;
  color: #333;
}

.article-item p {
  margin: 0;
  color: #666;
}

分页功能

如果文章数量较多，可以添加分页功能。使用 v-pagination 组件（如 Element UI 的分页组件）或自定义分页逻辑。

<template>
  <div>
    <div class="article-list">
      <!-- 文章列表渲染 -->
    </div>
    <el-pagination
      @current-change="handlePageChange"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="totalArticles"
      layout="prev, pager, next">
    </el-pagination>
  </div>
</template>

分页逻辑示例：

data() {
  return {
    currentPage: 1,
    pageSize: 10,
    totalArticles: 0,
    articles: []
  }
},
methods: {
  fetchArticles() {
    axios.get('/api/articles', {
      params: {
        page: this.currentPage,
        size: this.pageSize
      }
    }).then(response => {
      this.articles = response.data.list
      this.totalArticles = response.data.total
    })
  },
  handlePageChange(page) {
    this.currentPage = page
    this.fetchArticles()
  }
}

搜索与筛选

为文章列表添加搜索或筛选功能，提升交互性。可以通过绑定输入框和筛选逻辑实现。

<template>
  <div>
    <input v-model="searchQuery" placeholder="搜索文章" @input="filterArticles" />
    <div class="article-list">
      <!-- 筛选后的文章列表 -->
    </div>
  </div>
</template>

筛选逻辑示例：

data() {
  return {
    searchQuery: '',
    allArticles: [],
    filteredArticles: []
  }
},
methods: {
  fetchArticles() {
    axios.get('/api/articles')
      .then(response => {
        this.allArticles = response.data
        this.filteredArticles = response.data
      })
  },
  filterArticles() {
    this.filteredArticles = this.allArticles.filter(article => {
      return article.title.includes(this.searchQuery) || 
             article.content.includes(this.searchQuery)
    })
  }
}

响应式优化

确保文章列表在不同设备上显示良好，可以通过响应式设计或媒体查询调整布局。

@media (max-width: 600px) {
  .article-list {
    padding: 0 10px;
  }
  .article-item {
    padding: 12px;
  }
}