當(dāng)前位置：首頁 > 前端技术 > vue >内容正文

vue

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

發(fā)布時間：2024/9/27 vue 42 豆豆

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

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

文章目錄

一、原始js寫法
- ① 效果圖
- ② 2秒之后
二、使用vue實(shí)現(xiàn)
- ① 思考
- ② vue寫法
- ③ 效果圖
三、vue總結(jié)

一、原始js寫法

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>使用原始js 實(shí)現(xiàn)隔2秒顯示不同內(nèi)容</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實(shí)現(xiàn)

① 思考

我們?yōu)槟褂昧薞UE.js之后，就不需要關(guān)注任何dom的編碼了
使用vue實(shí)現(xiàn)隔2秒改變content的內(nèi)容，那又該怎樣做呢？
我們不需要修改dom，只需要對數(shù)據(jù)進(jìn)行變更即可，頁面就會自動的跟著變化。

② vue寫法

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

③ 效果圖

2秒之后

三、vue總結(jié)

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

下一篇：（vue基礎(chǔ)試煉_03）使用vue.js實(shí)現(xiàn)TodoListhttps://gblfy.blog.csdn.net/article/details/103842233

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。