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"></i><i v-show="isRight && item.result == 1" class="iconfont icon-right"></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内の他の関連記事もぜひご注目ください! 以下もご興味があるかもしれません:
|
>>: Tomcat マルチポートドメイン名アクセスと gzip 圧縮方式を有効にする構成
目次1. プロジェクトフォルダ構造1. アセットフォルダ2. 図書館3. ローカル設定(ローカル) ...
概要:ファイルシステム モジュールは、標準の POSIX ファイル I/O 操作セットをラップしたシ...
序文Ubuntu 18.04 LTS で IP アドレスを設定する方法は、これまで使用されていた設定...
2日前に新しい会社に入社しました。その会社ではIntelli Ideaを使っています。Eclipse...
データベース管理システムにおける同時実行制御のタスクは、データベース内の同じデータに同時にアクセスす...
MySQL ショートリンクの設定方法1. mysql 接続番号ステートメントコマンドを確認します。 ...
MySQL データベースをインストールすると、デフォルトの MySQL データベースの最大接続数が ...
親コンテナの幅は固定されています。子要素が親の幅を均等に分割するには、どのような方法がありますか?コ...
以下の操作デモンストレーションはすべて MySQL バージョン 5.6.36 に基づいています。仕事...
目次まとめ全体的なプロセスフロントエンドページコード検証コードとログイン サービスをリクエストする ...
コードをコピーコードは次のとおりです。高さ:自動 !重要;高さ:550px;最小高さ:550px; ...
<!DOCTYPE html> <html lang="ja"...
目次SSL証明書の作成1. 秘密鍵を生成する2. 証明書要求ファイルを生成する3. CRT証明書ファ...
この記事では、JavaScriptの長い画像スクロールの具体的なコードを参考までに共有します。具体的...
多くの人が MySQL の起動時にこのエラーに遭遇しています。まず、このエラーの前提は、サービス ス...