Vue.js 踩坑記之雙向綁定
這篇體驗(yàn)一下VUE的雙向綁定
<html> <head> <meta charset="utf-8"> </head> <body> <script src="https://unpkg.com/vue/dist/vue.min.js"></script> <div id="app"> <input type="text" v-model="CurrentTime" placeholder="當(dāng)前時(shí)刻"> <h1>當(dāng)前時(shí)刻{{ CurrentTime }}</h1> </div> <script> var app = new Vue({ el:'#app', data:{ CurrentTime: new Date() }, mounted:function(){ var _this = this; this.timer = setInterval(function(){ _this.CurrentTime = new Date(); },1000); }, beforeDestroy:function(){ if(this.timer){ clearInterval(this.timer); } } }); </script> </body> </html>
{{ }} 是所謂的文本插值的方法,目的是顯示雙向綁定的數(shù)據(jù)
mounted 表示el掛載到實(shí)例上調(diào)用的事件
beforeDestory 是實(shí)例銷毀以前調(diào)用
在上例中,在mounted事件中創(chuàng)建了一個(gè)定時(shí)器,每隔一秒就把當(dāng)前時(shí)間寫入文本框中,由于雙向綁定的原因,H1標(biāo)簽的文本也會(huì)跟著變化,和文本框的文本保持一致。在beforeDestory事件里在Vue實(shí)例銷毀前則會(huì)清除定時(shí)器
總結(jié)
以上所述是小編給大家介紹的Vue.js 踩坑記之雙向綁定,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
Vue-router 中hash模式和history模式的區(qū)別
這篇文章主要介紹了Vue-router 中hash模式和history模式的區(qū)別,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07Elementui按鈕設(shè)置默認(rèn)選中狀態(tài)的實(shí)現(xiàn)過程
這篇文章主要給大家介紹了關(guān)于Elementui按鈕設(shè)置默認(rèn)選中狀態(tài)的實(shí)現(xiàn)過程,文中通過圖文以及示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用Elementui具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-07-07深入理解?Vue?3實(shí)現(xiàn)組件通信的方法
本文將介紹幾種常見的?Vue?3?組件通信方法,包括?props、emits、provide?和?inject、事件總線以及?Vuex?狀態(tài)管理,需要的朋友可以參考下2024-07-07vue3中的elementPlus全局組件中文轉(zhuǎn)換方式
這篇文章主要介紹了vue3中的elementPlus全局組件中文轉(zhuǎn)換方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-07-07解決vue A對(duì)象賦值給B對(duì)象,修改B屬性會(huì)影響到A的問題
今天小編就為大家分享一篇解決vue A對(duì)象賦值給B對(duì)象,修改B屬性會(huì)影響到A的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09vue自動(dòng)路由-單頁面項(xiàng)目(非build時(shí)構(gòu)建)
這篇文章主要介紹了vue自動(dòng)路由-單頁面項(xiàng)目(非build時(shí)構(gòu)建),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04vue函數(shù)input輸入值請(qǐng)求時(shí)延遲1.5秒請(qǐng)求問題
這篇文章主要介紹了vue函數(shù)input輸入值請(qǐng)求時(shí)延遲1.5秒請(qǐng)求問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-04-04