Vueは質問応答機能を実装する

Vueは質問応答機能を実装する

1. リクエスト回答インターフェース

2. ユーザーの回答が正しいかどうかを判断します。回答が正しい場合は、次の質問に進みます。回答が間違っている場合は、ポップアップ ウィンドウが表示され、ユーザーに間違った回答があることを通知し、質問に再度回答するように求めます。

<div class="active_title">
      <span>{{ オーダータイトル }}</span>
</div>
<p v-show="toanswer" ref="question">{{ title }}</p>
<div class="answer-btns" @click="answerClick($event)">
    <span class="answer-btn" :class="`${isRight && item.result == 1?'right':''}`" v-for="回答内のアイテム" :data-result='item.result'>{{ item.name }} <i class="iconfont icon-wrong">&#xe677;</i><i v-show="isRight && item.result == 1" class="iconfont icon-right">&#xe678;</i>
    </span>
</div>
すべてのデータを取得する() {
   this.$axios.get(回答インターフェース).then((res)=>{
     parseInt(res.data.errCode)>=0の場合{
       this.allData=res.data.データ
       if(this.allData.question.length > 0) {
          this.toanswer = true
       }            
         this.title = this.allData.question[0].title // どの質問 this.answer = this.allData.question[0].answer // どの質問 }else{
       this.toast = this.$createToast({
          txt: res.data.message、
          タイプ: 'txt'
        })
       this.toast.show()
    }
   }).catch((err)=>{
      コンソール.log(エラー)
    })
},

回答クリック(e) {
  定数 tar = e.target,
  クラス名 = e.target.クラス名
  if(className == "answer-btn") {
    this.mask = true
    定数結果 = tar.dataset.result
    結果 == 1 の場合
      // console.log('正しいものを選択してください',result);
      this.isRight = true
      $(tar).addClass('right')
    } それ以外 {
       // console.log('間違った選択',結果);
       this.isRight = true
       this.isWrong = true
       $(tar).addClass('間違っています')
       タイムアウトを設定する(() => {
       this.maskTips = true
     }, 1200);
   }
   タイムアウトを設定する(() => {
    this.clickNum++
    if(this.clickNum > 2) {
      this.clickNum = 2
         if(this.isWrong) {
           console.log('間違った答え');
           this.mask = false
           this.maskTips = true
           偽を返す
         } それ以外 {
           console.log('正解');
          }
         }
          $('.answer-btn').removeClass('間違っています')
          this.orderTitle = this.orderTitles[this.clickNum]
          this.isRight = this.mask = false
          this.title = this.allData.question[this.clickNum].title
          this.answer = this.allData.question[this.clickNum].answer
        },1200)
     }
  },

以上がVueの応答機能の詳しい内容です。Vueの応答機能についてさらに詳しく知りたい方は、123WORDPRESS.COM内の他の関連記事もぜひご注目ください!

以下もご興味があるかもしれません:
  • Vueはカスタムの複数選択および単一選択回答機能を実装します

<<:  MYSQL ローカルインストールと問題解決

>>:  Tomcat マルチポートドメイン名アクセスと gzip 圧縮方式を有効にする構成

推薦する

HTML 要素 noscript の使用の紹介

noscript の定義と使用法noscript 要素は、スクリプトが実行されない場合の代替コンテン...

Vue ベースの Excel 解析とエクスポートの詳細な説明

目次序文基本的な紹介コードの実装基本構造アップロード分析Excel にエクスポート基本構造Excel...

複数のサーバーにNginxリバースプロキシを実装する方法

Nginx は複数のサーバーをリバース プロキシします。つまり、nginx に異なるリクエストを送信...

HTMLページの読み込み速度を上げる方法

(1)HTTPリクエストを減らす。 (リソース ファイルをマージし、イメージ スプライトを使用します...

Bツリーの削除プロセスの紹介

前回の記事 https://www.jb51.net/article/154157.htm では、B...

Vue マルチ選択リスト コンポーネントの詳細な説明

マルチ選択は、すべてのオプションを一覧表示し、ユーザーが Ctrl/Shift キーを使用して複数選...

ウェブデザインのグラフィック構成と組版機能の紹介

すべてには基礎が必要です。家を建てるには基礎が必要です。方程式を解くには、まず九九を覚える必要があり...

MySQLにおけるACIDトランザクションの実装原理の詳細な説明

導入いつものように、シーンから始めましょう〜インタビュアー:「トランザクションの4つの特性をご存知で...

React Native スキャフォールディングの基本的な使い方の詳細な説明

プロジェクトを構築する対応するパスでコマンドラインを実行します: react-native init...

MySQL カーソルの概念と使用法の詳細な説明

この記事では、例を使用して MySQL カーソルの概念と使用方法を説明します。ご参考までに、詳細は以...

Linux dirnameコマンドの具体的な使い方

01. コマンドの概要dirname - ファイル名からディレクトリ以外のサフィックスを削除しますd...

コード標準では、SQL ステートメントに結合が多すぎないようにする必要があるのはなぜですか?

無料ポイントインタビュアー:Linuxを使ったことはありますか?私:はいインタビュアー:メモリ使用量...

MySQL InnoDB テーブルスペース暗号化の例の詳細な説明

序文MySQL 5.7.11 以降、MySQL は、別の表領域に格納された InnoDB テーブルの...

Nginx で何ができるかの包括的な分析

序文この記事は、サードパーティのモジュールをロードせずにNginxで処理できることのみに焦点を当てて...

Win10 DVWA のダウンロード、インストール、構成のグラフィック チュートリアルの詳細な説明 (初心者向け学習侵入)

コンピュータ システムが再インストールされ、侵入テスト学習環境 DVWA を再インストールする必要が...