（vue基础试炼_02）使用vue.js实现隔2秒显示不同内容
生活随笔
收集整理的這篇文章主要介紹了
（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><!--引入vue.js庫--><script src="vue.js"></script> </head><body> <!--vue接管的div--> <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秒显示不同内容的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 开发经验分享_05_葫芦画瓢
- 下一篇： 工作流实战_08_flowable 流程