レイアウト部分: <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 プロセス、メモリ、カップ消費量を表示dockerコンテナを起動し、dockerinsp...
この記事の例では、参考までに虫眼鏡コンポーネントを開発するためのjsの具体的なコードを共有しています...
今日はメニューボタンを作りました。マウスをボタンに移動するすると、ドロップダウンサブメニューが表示さ...
まとめDocker-compose は複数の Docker コンテナ サービスを簡単に組み合わせるこ...
目次Dockerカスタムネットワーク1. カスタムネットワークの紹介2. カスタムネットワークを作成...
NFSが提供するサービスマウント: サーバー上で /usr/sbin/rpc.mountd サーボ ...
目次ファーストルックインデックスインデックスの概念インデックスファイルの構成インデックスの役割SQL...
ウェブサイトを見るというのは、実は美しい女性を評価するようなものです。見た目を見るとき、私たちは見た...
怖いですね! 写真の翻訳: (内側から外側へ)最初のレイヤー:ユーザーエクスペリエンス第2層:コンテ...
コンテナは Docker のもう一つの中心的な概念です。簡単に言えば、コンテナとは、独立して実行され...
数日前にプログラムを書いていたとき、プロンプト情報 (TITLE) を新しい行で囲みたいと思いました...
通常のウェブサイトのソースコードを開くと、ソースコードは<!DOCTYPE htmlで始まる必...
序文:私は友人のプロジェクトのバグを修正するのを手伝ったのでこれを書きました。この関数を書くのは初め...
コードをコピーコードは次のとおりです。 <!--[IEの場合]><script t...
HTML で長いデータを表示する場合、マウスをその上に移動するとデータを切り捨てて完全なデータを表示...