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 圧縮方式を有効にする構成

推薦する

CocosCreatorプロジェクト構造の仕組みの詳細な説明

目次1. プロジェクトフォルダ構造1. アセットフォルダ2. 図書館3. ローカル設定(ローカル) ...

Node.js の fs モジュールと Path モジュールのメソッドの詳細な説明

概要:ファイルシステム モジュールは、標準の POSIX ファイル I/O 操作セットをラップしたシ...

Ubuntu 18.04 LTSでIPアドレスを設定するための完全な手順

序文Ubuntu 18.04 LTS で IP アドレスを設定する方法は、これまで使用されていた設定...

Intelli Idea で Tomcat 設定が見つからない問題の解決方法

2日前に新しい会社に入社しました。その会社ではIntelli Ideaを使っています。Eclipse...

MySQL における楽観的ロックと悲観的ロックの例

データベース管理システムにおける同時実行制御のタスクは、データベース内の同じデータに同時にアクセスす...

操作例 MySQL ショートリンク

MySQL ショートリンクの設定方法1. mysql 接続番号ステートメントコマンドを確認します。 ...

MySQL で最大接続数を正しく変更する 3 つの方法

MySQL データベースをインストールすると、デフォルトの MySQL データベースの最大接続数が ...

親コンテナの CSS 均等分割 (完全三分の一) の実装

親コンテナの幅は固定されています。子要素が親の幅を均等に分割するには、どのような方法がありますか?コ...

MySQL の general_log ログの知識ポイントの紹介

以下の操作デモンストレーションはすべて MySQL バージョン 5.6.36 に基づいています。仕事...

antd pro に基づく SMS 認証コード ログイン機能 (プロセス分析)

目次まとめ全体的なプロセスフロントエンドページコード検証コードとログイン サービスをリクエストする ...

divコンテナ内の背景色または画像は、サイズが大きくなるにつれて大きくなります。

コードをコピーコードは次のとおりです。高さ:自動 !重要;高さ:550px;最小高さ:550px; ...

nginxとIISで使用できるSSL証明書を作成する

目次SSL証明書の作成1. 秘密鍵を生成する2. 証明書要求ファイルを生成する3. CRT証明書ファ...

JavaScript で長い画像のスクロール効果を実装する

この記事では、JavaScriptの長い画像スクロールの具体的なコードを参考までに共有します。具体的...

MySQL 起動時に「サーバーは PID ファイルを更新せずに終了しました」というエラーが報告される理由の詳細な分析

多くの人が MySQL の起動時にこのエラーに遭遇しています。まず、このエラーの前提は、サービス ス...