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

推薦する

Docker View プロセス、メモリ、カップ消費量

Docker プロセス、メモリ、カップ消費量を表示dockerコンテナを起動し、dockerinsp...

虫眼鏡コンポーネントのネイティブ js 実装

この記事の例では、参考までに虫眼鏡コンポーネントを開発するためのjsの具体的なコードを共有しています...

オブジェクトアニメーションによってブロックされずにオブジェクトに div を表示する方法

今日はメニューボタンを作りました。マウスをボタンに移動するすると、ドロップダウンサブメニューが表示さ...

docker compose サービスの起動順序を制御する方法

まとめDocker-compose は複数の Docker コンテナ サービスを簡単に組み合わせるこ...

Dockerカスタムネットワークの詳細な紹介

目次Dockerカスタムネットワーク1. カスタムネットワークの紹介2. カスタムネットワークを作成...

AIX マウント NFS の書き込み効率が低い場合の解決策

NFSが提供するサービスマウント: サーバー上で /usr/sbin/rpc.mountd サーボ ...

データベースインデックスの知識ポイントの概要

目次ファーストルックインデックスインデックスの概念インデックスファイルの構成インデックスの役割SQL...

優れたウェブサイトのコピーライティングと優れたユーザーエクスペリエンス

ウェブサイトを見るというのは、実は美しい女性を評価するようなものです。見た目を見るとき、私たちは見た...

ユーザー エクスペリエンス デザイナーとは誰ですか?

怖いですね! 写真の翻訳: (内側から外側へ)最初のレイヤー:ユーザーエクスペリエンス第2層:コンテ...

Docker 学習: コンテナ コンテナの具体的な使用方法

コンテナは Docker のもう一つの中心的な概念です。簡単に言えば、コンテナとは、独立して実行され...

HTML タイトル属性をラップする方法

数日前にプログラムを書いていたとき、プロンプト情報 (TITLE) を新しい行で囲みたいと思いました...

HTMLバージョン宣言DOCTYPEタグ

通常のウェブサイトのソースコードを開くと、ソースコードは<!DOCTYPE htmlで始まる必...

ElementUI のネストされたテーブルに基づいて複数選択を実装するためのサンプル コード

序文:私は友人のプロジェクトのバグを修正するのを手伝ったのでこれを書きました。この関数を書くのは初め...

html ページ!--[IE の場合]...![endif]--使用方法の詳細な紹介

コードをコピーコードは次のとおりです。 <!--[IEの場合]><script t...

長いデータを HTML で表示するときに処理する方法

HTML で長いデータを表示する場合、マウスをその上に移動するとデータを切り捨てて完全なデータを表示...