Vueは単純なランダムロールコールを実行します

Vueは単純なランダムロールコールを実行します

レイアウト部分:

<div id="アプリ">
        <p>{{結果}}</p>
        <button @click="randomName()">{{txt}}</button>
    </div>


Vue部分:

 <スクリプト>
        vm = new Vue({
            el:'#app',
            データ:{
                リスト:["シャオイー","リール","ワンサン","土曜日","チャンウー"],
                // ランダムに名前が付けられたコンテンツの結果:''、
                //ボタンのテキストコンテンツ txt: "点呼開始",
                // プロセス制御スイッチオープン: true、
                // タイマースイッチを定義します timer:null
            },
            メソッド: {
                動く(){
                    // 0 から現在の配列の長さまでの乱数を取得します。let random = Math.floor(Math.random()*(this.list.length-0))
 
                    // 乱数をリスト配列のランダムな添え字にして、result に割り当て、ページにレンダリングします。this.result = this.list[random]
                },
                ランダム名(){
                    // プロセス制御スイッチ if(this.open){
                        // タイマーを定義し、move メソッドを呼び出します this.timer = setInterval(this.move,100)
                        this.txt = 「名前を呼ぶのはやめてください」
                        this.open = false
                    }それ以外{
                        // タイマーをクリアする clearInterval(this.timer)
                        this.txt = "点呼開始"
                        this.open = true
                    }
                }
            }
        })
    </スクリプト>


結果を表示:

Vue で簡単なランダム点呼を行う方法についてはこれで終わりです。Vue でランダム点呼を行う方法についての詳細は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  aタグ内のテキストを非表示にして画像を表示するには?360モードレンダリングに対応

>>:  Minio 軽量オブジェクト ストレージ サービスのインストールとブラウザの使用チュートリアル

推薦する

適応型ウェブページを設計および作成する方法

3G の普及により、携帯電話を使ってインターネットにアクセスする人が増えています。モバイル デバイス...

LinuxサーバにおけるNginxとApacheの共存の実装方法の分析

この記事では、Linux サーバー上で Nginx と Apache の共存を実装する方法について説...

XHTML の一般的な構造タグ

構造本文、見出し、HTML、タイトル文章abbr、頭字語、アドレス、引用ブロック、br、引用、コード...

MySQL の int、char、varchar のパフォーマンスを比較する

インターネットには、真実のように見える「噂」がたくさんあります。もちろん、悪意のあるものではありませ...

MySQL で置換操作を使用したときにデータ損失が発生する問題の解決策

序文同社の開発者は、データの更新時に replace into ステートメントを使用していました。不...

MySQL での重複キー更新時の replace into と insert into の使用法と相違点の分析

この記事では、MySQL での重複キー更新時の replace into と insert into...

優れた登録プロセスの手順

ウェブサイトにとって、これは最も基本的な機能です。それでは、登録プロセスに含まれる手順を見てみましょ...

Linux デスクトップ用の 4 つのスキャン ツール

ペーパーレスの世界はまだ到来していませんが、書類や写真をスキャンすることで紙をなくす人が増えています...

MySQL 8.0.17 のインストールと設定のグラフィックチュートリアル

この記事は、参考のためにMySQL 8.0.17のインストールと設定のグラフィックチュートリアルを記...

MySQL 8.0.19 winx64 インストールチュートリアルと Windows 10 での初期パスワードの変更

この記事では、参考までにMySQL 8.0.19 winx64のインストールチュートリアルを紹介しま...

Vue プロジェクト コード分割ソリューション

目次背景目的分割前プロセス設計ディレクトリ構造の設計問題分割後プロセス設計ディレクトリ構造の設計問題...

Node.js の TCP 接続処理のコア プロセス

数日前、友人と Node.js の epoll とリクエスト処理に関する知識を交換しました。今日は、...

MySQLでルートユーザーのパスワードを変更する方法

方法1: SET PASSWORDコマンドを使用する mysql> username@loca...

Vue での this.$set の使用に関する詳細な説明

目次Vue での this.$set の使用使用なぜレスポンシブなのか?分析する要約するVue での...