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

推薦する

航空機戦争ゲームを実装するためのJavaScript

この記事では、キャンバスとjsを使用して簡単な飛行機戦争を実装する方法を参考までに紹介します。具体的...

JavaScript WeakMap の使い方の詳しい説明

WeakMap オブジェクトは、キーが弱参照であるキー/値のペアのコレクションです。キーはオブジェク...

HTML ページでギリシャ文字を使用する方法

ギリシャ文字は、特に数学や物理学などの科学技術分野で非常によく使用される記号列であり、特定の意味を持...

現在使用されている設定ファイル my.cnf を表示する mysql メソッド (推奨)

my.cnfは、MySQL の起動時に読み込まれる設定ファイルです。通常は MySQL インストー...

Nginx ベースの Mencached キャッシュ構成の詳細な説明

導入Memcached は分散キャッシュ システムです。Memcached には認証とセキュリティ制...

Vue の echarts ツールチップにクリック イベントを追加する詳細な説明

目次必要回避策1. ツールチップを設定する2. hookToolTip変数を定義する3. メソッド内...

MySQLインデックスの詳細

1. インデックスの原則インデックスは、列内の特定の値を持つ行をすばやく見つけるために使用されます。...

DockerでVueプロジェクトをデプロイする方法を教えます

1.前面に書きます:軽量仮想化テクノロジーとして、Docker には継続的インテグレーション、バージ...

vue-router のハッシュモードと履歴モードの違い

vue-routerには2つのモードがありますハッシュモード履歴モード1. シングルページアプリケー...

Linux の一般的な基本コマンドと使用方法

この記事では、一般的な基本的な Linux コマンドとその使用方法を例を使って説明します。ご参考まで...

MySQL ストアドプロシージャとストアドファンクションの詳細な説明

1 ストアドプロシージャ1.1 ストアドプロシージャとは何かストアド プロシージャは、特定の機能を実...

VMware Workstation 14 Pro インストール Ubuntu 16.04 チュートリアル

この記事では、VMware Workstation14 ProにUbuntu 16.04をインストー...

MySQL binlog の解析

目次1. binlogの紹介2. Binlog関連のパラメータ3. バイナリログの内容を分析するIV...

Vue でコンポーネントを一括インポート、登録、使用する方法

序文コンポーネントは、非常に頻繁に使用されるものです。多くの人は、コンポーネントを 1 つのファイル...

Linux入力サブシステムフレームワーク原理の分析

入力サブシステムフレームワークLinux 入力サブシステムは、上から下に向かって、入力サブシステム ...