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 圧縮方式を有効にする構成
この記事では、キャンバスとjsを使用して簡単な飛行機戦争を実装する方法を参考までに紹介します。具体的...
WeakMap オブジェクトは、キーが弱参照であるキー/値のペアのコレクションです。キーはオブジェク...
ギリシャ文字は、特に数学や物理学などの科学技術分野で非常によく使用される記号列であり、特定の意味を持...
my.cnfは、MySQL の起動時に読み込まれる設定ファイルです。通常は MySQL インストー...
導入Memcached は分散キャッシュ システムです。Memcached には認証とセキュリティ制...
目次必要回避策1. ツールチップを設定する2. hookToolTip変数を定義する3. メソッド内...
1. インデックスの原則インデックスは、列内の特定の値を持つ行をすばやく見つけるために使用されます。...
1.前面に書きます:軽量仮想化テクノロジーとして、Docker には継続的インテグレーション、バージ...
vue-routerには2つのモードがありますハッシュモード履歴モード1. シングルページアプリケー...
この記事では、一般的な基本的な Linux コマンドとその使用方法を例を使って説明します。ご参考まで...
1 ストアドプロシージャ1.1 ストアドプロシージャとは何かストアド プロシージャは、特定の機能を実...
この記事では、VMware Workstation14 ProにUbuntu 16.04をインストー...
目次1. binlogの紹介2. Binlog関連のパラメータ3. バイナリログの内容を分析するIV...
序文コンポーネントは、非常に頻繁に使用されるものです。多くの人は、コンポーネントを 1 つのファイル...
入力サブシステムフレームワークLinux 入力サブシステムは、上から下に向かって、入力サブシステム ...