レイアウト部分: <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 が何に使用されるのかを理解する必要があ...
テーブルに table-layer:fixed スタイルを設定し、テーブル内の行が結合されていること...
最近、Zoom ビデオ会議をテストし、100 人が同時に会議に参加することをシミュレートする必要があ...
目次1. Vue スキャフォールディングをインストールする2. プロジェクトを作成する3.1 プロジ...
この記事では、マウスをドラッグしてdivのサイズを調整するJavaScriptの具体的なコードを参考...
ソースコードプレビュー: https://github.com/jdf2e/nutui NutUI ...
最近、練習プロジェクトをしていたときにスライダーを使う必要があったので、調べてみました。まず、水平ス...
私が実現したい機能は、新しいウィンドウを開いて新しいページを表示することですが、パラメータを渡す必要...
/****************** * カーネルデバッグ技術 ****************...
目次1. ユーザーとユーザーグループの重要性1) ユーザーの存在意義2) ユーザーグループの重要性2...
目次一般的な配列メソッドポップ()シフト解除()シフト()スライス()スプライス()配列から重複した...
目次1. CSS のみを使用して作成したアニメーションのクリスマスツリー2. CSS のみを使用して...
序文Boost ライブラリは、標準ライブラリのバックアップとして機能し、C++ 標準化プロセスの開発...
1. Expressライブラリとジェネレータをインストールするcmdを開いて、次のコマンドを入力しま...
この記事では、MySql のインデックス、ロック、トランザクションに関する知識のポイントをまとめてい...