當前位置：首頁 > 前端技术 > vue >内容正文

vue

（vue基础试炼_02）使用vue.js实现隔2秒显示不同内容

發布時間：2024/9/27 vue 34 豆豆

生活随笔收集整理的這篇文章主要介紹了（vue基础试炼_02）使用vue.js实现隔2秒显示不同内容小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

接上一篇：（vue基礎試煉_01）使用vue.js 快速入門hello worldhttps://gblfy.blog.csdn.net/article/details/103841156

文章目錄

一、原始js寫法
- ① 效果圖
- ② 2秒之后
二、使用vue實現
- ① 思考
- ② vue寫法
- ③ 效果圖
三、vue總結

一、原始js寫法

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>使用原始js 實現隔2秒顯示不同內容</title> </head><body> <div id="app"></div><script>var dom = document.getElementById('app');dom.innerHTML = 'hello world'setTimeout(function () {dom.innerHTML = 'hello world2'}, 2000) </script> </body> </html>

① 效果圖

② 2秒之后

二、使用vue實現

① 思考

我們為您使用了VUE.js之后，就不需要關注任何dom的編碼了
使用vue實現隔2秒改變content的內容，那又該怎樣做呢？
我們不需要修改dom，只需要對數據進行變更即可，頁面就會自動的跟著變化。

② vue寫法

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>使用vue.js 隔2秒改變頁面顯示內容</title><script src="vue.js"></script> </head><body>  <div id="app">{{content}}</div><script>/*創建了一個vue實例*/var app = new Vue({el: '#app',data: {content: "hello world"}});setTimeout(function () {app.$data.content = 'bye world'}, 2000) </script> </body> </html>

③ 效果圖

2秒之后

三、vue總結

通過這個例子，我們應該知道，當我們書寫vue代碼的時候不需要關注dom的操作，而是集中精力關注數據的管理之上即可，數據放的是什么，頁面就是展示什么。數據發生改變了，數據也會跟著改變。

下一篇：（vue基礎試煉_03）使用vue.js實現TodoListhttps://gblfy.blog.csdn.net/article/details/103842233

總結

以上是生活随笔為你收集整理的（vue基础试炼_02）使用vue.js实现隔2秒显示不同内容的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。