一个简单的vue+vuex的答题小例子，新手入门

最新推荐文章于 2024-07-22 10:10:18 发布

Cenmen_17714

最新推荐文章于 2024-07-22 10:10:18 发布

阅读量6.2k

点赞数 5

分类专栏： HTML VUE 文章标签： vue vuex

本文链接：https://blog.csdn.net/Cenmen_17714/article/details/83578335

版权

这是一个适合新手的Vue+Vuex简单答题应用实例，简化自github项目。包含开始、答题和结算页面，使用单个组件实现页面切换。通过Vuex管理状态，包括action、getter、mutations和state。代码已上传至个人github仓库。

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

这个例子是我仿照github上的一个例子后修改成的简单版，少了部分功能，初入门的我就简化来练手，不喜勿喷哦

这是原项目的地址：https://github.com/bailicangdu/vue2-happyfri

这是我修改后的项目地址：https://github.com/cenmen/vue-demo

开局先上效果图：开始页面-答题页面（五题）-结算得分；

项目目录如下：

首先是Background.vue组件，我只用了一个组件，其实应该要分组件的，但为了简单......

<template>
  <div class="mainbody">

    <div v-if="fatherComponent == 'home'" >
      <div class="item_list_container">
        <div class="home_logo_style"></div>
        <span class="start_item button_style" @click="startAnswer"></span>
      </div>
    </div>
    
    <div v-if="fatherComponent == 'answer'" >
      <div class="item_list_container" v-if="itemDetail.length > 0">
        <span class="num_tip">{
  {itemDetail[itemNum-1].topic_num}}</span>
        <span class="name_tip">{
  {itemDetail[itemNum-1].topic_name}}</span>
          <ul>
            <li  v-for="(item, index) in itemDetail[itemNum-1].topic_answer" @click="choosed(index, item.topic_answer_id)" class="item_list">
              <span class="option_detail" v-bind:class="{'has_choosed':choosedNum==index}">{
  {item.answer_name}}</span>
            </li>
          </ul>
        <span class="next_item button_style" @click="nextItem" v-if="itemNum < itemDetail.length"></span>
        <span class