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 軽量オブジェクト ストレージ サービスのインストールとブラウザの使用チュートリアル

推薦する

MySQL 基本チュートリアル: DML ステートメントの詳細な説明

目次DMLステートメント1. レコードを挿入する2. 記録を更新する3. シンプルなクエリレコード4...

ウェブフロントエンドコードを書く際の考慮事項のまとめ

1. HTMLタグの前に次のような文を追加するのが最適です。 <!DOCTYPE HTML P...

CSS で美しい時計アニメーション効果を実装するためのサンプルコード

仕事を探しています!!!事前準備:まず、このアニメーションは、以前のローディングアニメーションとクー...

MySQLデータベース移行により、大量のデータを迅速にエクスポートおよびインポートできます

データベースの移行は、よく遭遇する問題です。データ量が少ない場合、移行は基本的に問題になりません。実...

いくつかのMySQL更新操作のケース分析

目次ケーススタディアカウント残高を更新する直接更新楽観的ロック方式ロックフリーソリューションキューイ...

アバター変更機能を実装するJavaScript

この記事では、アバター変更機能を実装するためのJavaScriptの具体的なコードを参考までに共有し...

ウェブデザインにおける階層化インターフェースの設計経験

多くのネットユーザーは、なぜ自分のウェブサイトはいつも色の問題を抱えていて、いつも地味に見え、注目を...

JavaScript Three.js でテキストを作成する最初の経験

目次効果テキストの作成を開始するまずフォントローダーを作成するフォントライブラリを読み込むテキストジ...

2列のデータをSQLの新しい列として操作する

以下のように表示されます。 bb_sbからa1、a2、a1+a2 a、a1*a2 b、a1*1.0/...

CSS background-blend-modeの仕組みを深く理解する

この記事は共有および集約することを歓迎します。全文を転載する必要はありません。著作権を尊重してくださ...

Linuxターミナルでの一般的なMySQL操作コマンドの詳細な説明

仕える: # chkconfig --list すべてのシステム サービスを一覧表示します # ch...

WHMCS V7.4.2 グラフィカル インストール チュートリアル

1. はじめにWHMCS は、ユーザー管理、請求書の支払い、ヘルプ サービスなど、オンライン ビジネ...

JavaScript ではおそらく switch 文を使う必要はない

目次スイッチも複雑なコードブロックもありませんPythonからのインスピレーション辞書を使用してスイ...

MySQLのバックアップとリカバリの詳細な説明

序文:前回の記事では、さまざまな MySQL ステートメント構文の使用法とユーザー権限に関する知識を...

ローカル yum ソースの設定、国内 yum ソースの設定、epel ソースの設定を行う Linux の手順

1. ローカルyumソースを設定する1. ISOイメージをマウントする マウント -o loop /...