🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

4673閲覧

一定時間経過後画面の一部が切り替わるようにしたい(vue.jsなどを使って)

tofu_fine

総合スコア9

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/12/18 09:01

編集2020/12/18 11:03

ユーザーが特定の画面を閲覧しているとき、一定時間経過すると自動的に、その画面の一部が切り替わる仕様にしたいです。
自分が思いついたのは、vue.routerの
<router-link to="/">Home</router-link>
<router-view/>
を使うことでしたが、タブ操作(ユーザーのクリック)が必要なようで時間による画面遷移の実装はできないのではないかと感じました。
vue.jsを使わなくとも、コンポーネントが切り替わりさえすればよいのですが、どうすればいいでしょうか。

追記
質問がわかりづらくてすいません。
具体的に自分のやりたいことを追記いたします。
問題が出る画面があり、①最初はその画面の下で回答をするテキストエリアを配置しています。
一定時間経過後、テキストエリアが消え、②回答者の回答一覧のテーブルが表示されるようにしたいと考えています。
回答一覧はDBからaxiosのgetメソッドを使ってデータを取得します。
javascript初学者ですが、vue.jsのコンポーネントが便利だなあと思い、vue.jsを使って画面を作っていました。
javascriptのsettimeout関数内でaxios.getやremoveを使い実現できるのでしょうか。
差し支えなければ回答をいただければと思います。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2020/12/18 11:09

切り替えるだけならCSSでもできますが・・・
tofu_fine

2020/12/18 11:50

コメントありがとうございます。CSSを勉強します。
guest

回答1

0

ベストアンサー

こんばんは。
質問の内容がいまいちつかめていないのですが、WEBページで単純に一定時間たった後に表示を変更するのであれば、setTimeout(function, delayTime)を使用して、表示したタイミングで次のコードを実行すればよいかと思います。

javascript

1setTimeout(function(){ 2 //表示を変更する処理 3}, 表示を変更する処理までの時間);

お試しくだされば幸いです。

投稿2020/12/18 10:19

mtripg6666tdr

総合スコア37

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tofu_fine

2020/12/18 11:03

ご回答ありがとうございます。質問の詳細を追記いたします。 settimeoutとremoveを使って実現できるのかもしれません。
mtripg6666tdr

2020/12/18 11:26

これだとVue.jsなどのライブラリは使ってないですがこんな感じでできると思います。 ```javascript //「一定期間」のカウント開始のタイミングで実行します setTimeout(function(){ axios.get(/*url*/).then(response => { //responseを使用したデータ処理・DOMへの反映 ... document.getElementById(/*テキストボックスのid*/).style.display = 'none'; // テキストボックスを非表示にして document.getElementById(/*回答者の回答一覧のテーブルのid*/).style.display = 'block'; // テーブルを表示 }) document.getElementById(/*テキストボックスのid*/).disabled = true; // 時間が経過したら入力を無効に }, /*時間をミリ秒単位で引数で渡す。例えば一分なら*/60000); ```
tofu_fine

2020/12/18 11:49

うまくいったようです! 大変助かりました。ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問