vue实现题目列表

Vue实现题目列表的方法

数据准备

在Vue中实现题目列表需要先准备题目数据。通常将题目数据存储在组件的data或通过API从后端获取。示例数据结构如下：

data() {
  return {
    questions: [
      { id: 1, title: '题目1', content: '内容1' },
      { id: 2, title: '题目2', content: '内容2' }
    ]
  }
}

列表渲染

使用v-for指令循环渲染题目列表。在模板中添加以下代码：

<ul>
  <li v-for="question in questions" :key="question.id">
    <h3>{{ question.title }}</h3>
    <p>{{ question.content }}</p>
  </li>
</ul>

样式优化

为题目列表添加CSS样式，提升用户体验。示例样式：

ul {
  list-style: none;
  padding: 0;
}
li {
  margin-bottom: 15px;
  padding: 10px;
  border: 1px solid #eee;
}

分页功能

当题目数量较多时，可以添加分页功能。使用第三方库如vue-paginate或自定义分页组件：

<paginate
  v-model="currentPage"
  :page-count="totalPages"
  :click-handler="changePage">
</paginate>

交互功能

为题目列表添加点击事件，实现题目详情查看功能：

<li v-for="question in questions" @click="showDetail(question.id)">
  <!-- 题目内容 -->
</li>

数据加载

通过API异步加载题目数据，使用axios或fetch：

methods: {
  fetchQuestions() {
    axios.get('/api/questions')
      .then(response => {
        this.questions = response.data
      })
  }
}

状态管理

对于复杂应用，建议使用Vuex管理题目列表状态：

// store.js
state: {
  questions: []
},
mutations: {
  setQuestions(state, questions) {
    state.questions = questions
  }
}

组件化

将题目列表拆分为可复用组件，提高代码可维护性：

<question-list :questions="questions"></question-list>

搜索筛选

添加搜索功能，筛选题目列表：

<input v-model="searchText" placeholder="搜索题目">
<ul>
  <li v-for="question in filteredQuestions">
    <!-- 题目内容 -->
  </li>
</ul>

性能优化

对于大型题目列表，使用虚拟滚动技术提升性能：

<virtual-list :size="50" :remain="10">
  <div v-for="question in questions">
    <!-- 题目内容 -->
  </div>
</virtual-list>