レイアウト部分: <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 軽量オブジェクト ストレージ サービスのインストールとブラウザの使用チュートリアル
3G の普及により、携帯電話を使ってインターネットにアクセスする人が増えています。モバイル デバイス...
問題の説明Tencent Cloud CentOS7にnginxをインストールするsudo yum ...
この記事では、Linux サーバー上で Nginx と Apache の共存を実装する方法について説...
構造本文、見出し、HTML、タイトル文章abbr、頭字語、アドレス、引用ブロック、br、引用、コード...
インターネットには、真実のように見える「噂」がたくさんあります。もちろん、悪意のあるものではありませ...
序文同社の開発者は、データの更新時に replace into ステートメントを使用していました。不...
この記事では、MySQL での重複キー更新時の replace into と insert into...
ウェブサイトにとって、これは最も基本的な機能です。それでは、登録プロセスに含まれる手順を見てみましょ...
ペーパーレスの世界はまだ到来していませんが、書類や写真をスキャンすることで紙をなくす人が増えています...
この記事は、参考のためにMySQL 8.0.17のインストールと設定のグラフィックチュートリアルを記...
この記事では、参考までにMySQL 8.0.19 winx64のインストールチュートリアルを紹介しま...
目次背景目的分割前プロセス設計ディレクトリ構造の設計問題分割後プロセス設計ディレクトリ構造の設計問題...
数日前、友人と Node.js の epoll とリクエスト処理に関する知識を交換しました。今日は、...
方法1: SET PASSWORDコマンドを使用する mysql> username@loca...
目次Vue での this.$set の使用使用なぜレスポンシブなのか?分析する要約するVue での...