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 圧縮方式を有効にする構成
この記事の例では、ログインフォームを実装するためのJavaScriptの具体的なコードを参考までに共...
1. .shファイルを実行する./sh ファイルを使用して直接実行することもできますが、現在のターミ...
1. ドキュメントフローとフローティング1. ドキュメントフローとは何ですか? HTML では、ドキ...
目次1. インストールパッケージ(64ビット)をダウンロードする2. MySQLデータベースをインス...
1. 目標: mysql の character_set_server の値を latin1 から ...
目次.vue ファイルの解析文書情報を抽出するコンポーネント名、説明、プロパティ、メソッド、モデルを...
序文ソートはデータベースの基本的な機能であり、MySQL も例外ではありません。ユーザーは、Orde...
システム トレイ アイコンは、今日でも魔法のような機能です。アイコンを右クリックして目的のアクション...
インデックスはソートされたデータ構造です。 where 条件での検索や order by 条件での並...
目次1. JavaScriptはシングルスレッドです1. 同期タスク2. 非同期タスク2. タスクキ...
この記事では、例を使用して、MySQL 派生テーブルの簡単な使用方法を説明します。ご参考までに、詳細...
まず、全体的な考え方についてお話しします。 1. パスワードを使用してCentOSシステムにログイン...
目次1.配列を初期化する2. 配列の合計、最大値、最小値3. エラー値をフィルタリングする4. 論理...
a タグが新しいページを開くかどうか: (1)百度百科事典:ヘッダーが異なる場合は新しいページが開き...
MySQL バージョン 5.0 ではストアド プロシージャのサポートが開始されました。ストアド プロ...