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