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

推薦する

CSS3のbox-shadowプロパティの使い方の詳細な例

CSS には多くの属性があります。特に複数の値を設定する必要がある属性は、長期間使用しないと忘れられ...

Node.js+express+socket でオンラインのリアルタイム多人数チャットルームを実現

この記事では、オンラインリアルタイム多人数チャットルームを実現するためのNode.js+expres...

Linux lnコマンドの使用

1. コマンドの紹介ln コマンドは、ファイルのリンクを作成するために使用されます。リンクは、ハード...

MySQLでレコードを変更する場合、更新操作フィールド = フィールド + 文字列

シナリオによっては、varchar 型のフィールドを変更する必要があり、変更の結果は 2 つのフィー...

Navicat PremiumでSQLファイルをインポートする方法

今日、最終プロジェクトに取り組み始めましたが、今年はMySQLデータベースを使用したため、Navic...

JavaScript オブジェクトの組み込みオブジェクト、値型、参照型の説明

目次物体オブジェクト定義オブジェクトのメンバーを反復処理するJS組み込みオブジェクト数学オブジェクト...

Tomcat と WebLogic で純粋な HTML ファイルを展開するプロセスの分析

1. まず、純粋なHTMLファイルにはindex.htmlというエントリが必要です。 2. Tomc...

Nginx操作応答ヘッダー情報の実装

前提条件: ヘッダー情報操作をサポートするには、ngx_http_headers_module モジ...

CSS を使用して、画像に 3D の凸型と凹型のエフェクト (フレーム外に凸型、またはフレーム内に凹型) を実現します。

Ⅰ. 問題の説明: CSS を使用して画像の 3D 凸凹効果を実現します。 Ⅱ実施手順は以下のとお...

ウェブサイトのパフォーマンスを向上させるために画像を最適化する方法

目次概要画像圧縮とはJPEG/JPG JPGの利点JPGの使用シナリオJPGの欠点MozJPEG を...

Linux クラウド サーバー上に SFTP サーバーとイメージ サーバーを構築する方法

まず、SFTP プロトコルと FTP プロトコルの違いを理解してください。ここでは詳細には触れません...

任意の長さの配列を作成または埋めるための JS のヒントの要約

目次序文直接充填方式for ループの push() メソッド配列コンストラクタメソッド配列コンストラ...

Vue はカードフリップカルーセル表示を実装します

Vueカードのフリップカルーセル表示、フリップ時にデータを切り替えながら、参考までに、具体的な内容は...

Vueコンポーネントドキュメントを自動生成する方法を分析する

目次1. 現状2. コミュニティソリューション2.1 事業レビュー3. 技術的ソリューション3.1....

CSS3 を使用した SVG パス ストロークのアニメーション化入門チュートリアル

JavaScript に依存せず、純粋な CSS を使用してsvgストローク描画アニメーション効果と...