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

推薦する

CSS の優先順位に関する詳細な紹介

CSS の優先順位について話す前に、CSS とは何か、CSS が何に使用されるのかを理解する必要があ...

HTMLは無効なテーブル幅設定の問題を解決します

テーブルに table-layer:fixed スタイルを設定し、テーブル内の行が結合されていること...

Docker で Selenium グリッド分散環境を構築する実用的な方法

最近、Zoom ビデオ会議をテストし、100 人が同時に会議に参加することをシミュレートする必要があ...

Vue での bimface の使用に関する詳細

目次1. Vue スキャフォールディングをインストールする2. プロジェクトを作成する3.1 プロジ...

JavaScript はマウスのドラッグを実装して div のサイズを調整します

この記事では、マウスをドラッグしてdivのサイズを調整するJavaScriptの具体的なコードを参考...

jsは水平および垂直スライダーを実現します

最近、練習プロジェクトをしていたときにスライダーを使う必要があったので、調べてみました。まず、水平ス...

Vueは新しいウィンドウを開き、パラメータ転送のグラフィック例を実装します。

私が実現したい機能は、新しいウィンドウを開いて新しいページを表示することですが、パラメータを渡す必要...

Linux カーネル デバイス ドライバー カーネル デバッグ テクニカル ノート集

/****************** * カーネルデバッグ技術 ****************...

Linux システムでのユーザー管理の概要

目次1. ユーザーとユーザーグループの重要性1) ユーザーの存在意義2) ユーザーグループの重要性2...

JavaScript配列の一般的なメソッドの詳細な説明

目次一般的な配列メソッドポップ()シフト解除()シフト()スライス()スプライス()配列から重複した...

JavaScript によるダイナミッククリスマスツリーの詳細な説明

目次1. CSS のみを使用して作成したアニメーションのクリスマスツリー2. CSS のみを使用して...

Linuxでブーストライブラリをインストールするための完全な手順

序文Boost ライブラリは、標準ライブラリのバックアップとして機能し、C++ 標準化プロセスの開発...

Expressを使用してプロジェクトを自動的にビルドするNode.jsのプロセス全体

1. Expressライブラリとジェネレータをインストールするcmdを開いて、次のコマンドを入力しま...

MySql のインデックス、ロック、トランザクションの知識ポイントのまとめ

この記事では、MySql のインデックス、ロック、トランザクションに関する知識のポイントをまとめてい...