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

この記事の例では、ログインフォームを実装するためのJavaScriptの具体的なコードを参考までに共...

Linux でバックグラウンドで実行中のプログラムを表示して終了する方法

1. .shファイルを実行する./sh ファイルを使用して直接実行することもできますが、現在のターミ...

CSS でフローティングにより親要素の高さが崩れる問題を解決するいくつかの方法

1. ドキュメントフローとフローティング1. ドキュメントフローとは何ですか? HTML では、ドキ...

mysql-8.0.19-winx64 をインストールしてログインするための初心者向けチュートリアル (初心者必読)

目次1. インストールパッケージ(64ビット)をダウンロードする2. MySQLデータベースをインス...

mysql5.7.21 utf8 エンコーディングの問題と Mac 環境での解決方法

1. 目標: mysql の character_set_server の値を latin1 から ...

Vueコンポーネントドキュメント生成ツールライブラリのメソッド

目次.vue ファイルの解析文書情報を抽出するコンポーネント名、説明、プロパティ、メソッド、モデルを...

MySQL ソートの原則とケース分析

序文ソートはデータベースの基本的な機能であり、MySQL も例外ではありません。ユーザーは、Orde...

Linux でタスク用のカスタム システム トレイ インジケーターを作成する

システム トレイ アイコンは、今日でも魔法のような機能です。アイコンを右クリックして目的のアクション...

MySQLインデックスの基本構文

インデックスはソートされたデータ構造です。 where 条件での検索や order by 条件での並...

JavaScript マクロタスクとマイクロタスクの実行順序についての簡単な説明

目次1. JavaScriptはシングルスレッドです1. 同期タスク2. 非同期タスク2. タスクキ...

MySQL 派生テーブル(Derived Table)の簡単な使用例分析

この記事では、例を使用して、MySQL 派生テーブルの簡単な使用方法を説明します。ご参考までに、詳細...

パスワードログインなしでCentOS7にxshellリモートログインするアイデアを詳しく解説

まず、全体的な考え方についてお話しします。 1. パスワードを使用してCentOSシステムにログイン...

24 の実用的な JavaScript 開発のヒント

目次1.配列を初期化する2. 配列の合計、最大値、最小値3. エラー値をフィルタリングする4. 論理...

タグが新しいページを開くかどうかという問題。主要ウェブサイトの開設状況をまとめました

a タグが新しいページを開くかどうか: (1)百度百科事典:ヘッダーが異なる場合は新しいページが開き...

MySQL ストアドプロシージャの長所と短所の分析

MySQL バージョン 5.0 ではストアド プロシージャのサポートが開始されました。ストアド プロ...