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

推薦する

Windows 10 での MySQL 5.7.21 winx64 のインストールと設定方法のグラフィック チュートリアル

mysql 5.7.21 winx64 のインストールと設定方法: MySQLのコミュニティバージョ...

mysql5.7のインストールとNavicateの長期無料利用の実施手順

(I) mysql5.7のインストール: ❀詳細:無料のグリーンバージョン5.7のインストール方法は...

CentOS7でルートパスワードをリセットする方法

レンガを移動するプロセスでは、さまざまな環境および構成の問題があり、毎回異なるエラーが発生します。 ...

Windows に Docker をインストールする詳細なチュートリアル

ローカルの MySQL バージョンが比較的低いため、最近 MySQL のバージョンをアップグレードす...

子コンポーネントで vue activated を使用する詳細

ページ: ベース: <テンプレート> <div class="タブコンテ...

href をクリックした後にページがジャンプしないようにするための空のリンクの正しい書き方 # 問題

リンクを使用する必要がある場合もありますが、リンクする必要はありません。onclick イベントを処...

CSS3の新しいセレクタの例

構造(位置)擬似クラスセレクタ(CSS3) :first-child : 指定されたセレクタは、親要...

Tudou.comのホームページのデザイン方法

<br />私は数年間フロントエンドに取り組んできました。フロントエンドについて完全に理...

Apache Tomcat と IDEA エディターの統合に関する詳細なチュートリアル

1. Apache Tomcat 公式サイトから Tomcat 圧縮パッケージをダウンロードします。...

JavaScript関数におけるこのポイントの問題の詳細な説明

このキーワードどのオブジェクトが関数を呼び出しますか? また、関数内の this はどのオブジェクト...

MySQL クロスデータベーストランザクション XA 操作の例

この記事では、例を使用して、MySQL のデータベース間トランザクション XA 操作について説明しま...

この記事では、イベント委任を使用してJavaScriptメッセージボード機能を実装する方法について説明します。

イベント委任を使用してメッセージ ボード機能を実装します。 <!DOCTYPE html>...

MacにMySQLをインストールするときに初期パスワードを忘れた場合の対処方法

パスワードを忘れると困ります。Mac に MySQL をインストールするための初期パスワードを忘れて...

WebページのレイアウトではIE6の互換性の問題を考慮する必要があります

下の図は、当社のウェブサイト統計システムの訪問者詳細におけるブラウザ閲覧率を示しており、IE6 が ...

Vue+ElementUI Treeの使い方

Vue+ElementUI Treeの使い方は参考までに。具体的な内容は以下のとおりです。 フロント...