vue实现题目列表
Vue实现题目列表的方法
使用Vue实现题目列表可以通过组件化开发、数据绑定和状态管理来实现。以下是一种常见的实现方式：
数据结构设计
题目数据通常以数组形式存储，每个题目对象包含id、标题、内容等属性：
questions: [
{ id: 1, title: '题目1', content: '问题描述...' },
{ id: 2, title: '题目2', content: '问题描述...' }
]组件模板
创建题目列表组件，使用v-for指令循环渲染题目：
<template>
<div class="question-list">
<div v-for="question in questions" :key="question.id" class="question-item">
<h3>{{ question.title }}</h3>
<p>{{ question.content }}</p>
</div>
</div>
</template>样式处理
为题目列表添加基本样式：
.question-list {
max-width: 800px;
margin: 0 auto;
}
.question-item {
padding: 15px;
margin-bottom: 20px;
border: 1px solid #eee;
border-radius: 4px;
}数据加载
可以通过API异步获取题目数据：
export default {
data() {
return {
questions: []
}
},
created() {
this.fetchQuestions()
},
methods: {
async fetchQuestions() {
try {
const response = await axios.get('/api/questions')
this.questions = response.data
} catch (error) {
console.error('获取题目失败:', error)
}
}
}
}分页处理
对于大量题目，可以添加分页功能：
<template>
<div>
<question-list :questions="paginatedQuestions" />
<pagination
:total="questions.length"
:per-page="perPage"
@page-changed="handlePageChange"
/>
</div>
</template>状态管理
对于复杂应用，可以使用Vuex管理题目状态：
// store/modules/questions.js
export default {
state: {
questions: []
},
mutations: {
SET_QUESTIONS(state, questions) {
state.questions = questions
}
},
actions: {
async fetchQuestions({ commit }) {
const response = await axios.get('/api/questions')
commit('SET_QUESTIONS', response.data)
}
}
}题目筛选
添加筛选功能以便用户查找特定题目：
<input v-model="searchQuery" placeholder="搜索题目">computed: {
filteredQuestions() {
return this.questions.filter(question =>
question.title.includes(this.searchQuery) ||
question.content.includes(this.searchQuery)
)
}
}这种实现方式提供了基本的题目列表功能，可以根据具体需求进行扩展和优化。
