Vue.js 踩坑記之雙向綁定
更新時(shí)間：2018年05月03日 16:44:14 作者：lee576
這篇文章給大家?guī)砹薞ue.js 踩坑記之雙向綁定問題，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧
這篇體驗(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 踩坑記之雙向綁定，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
element?UI中el-dialog實(shí)現(xiàn)拖拽功能示例代碼
我們在開發(fā)中常會(huì)遇見拖拽的功能,下面這篇文章主要給大家介紹了關(guān)于element?UI中el-dialog實(shí)現(xiàn)拖拽功能的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
vuejs+element UI點(diǎn)擊編輯表格某一行時(shí)獲取內(nèi)容填入表單的示例
這篇文章主要介紹了vuejs+element UI點(diǎn)擊編輯表格某一行時(shí)獲取內(nèi)容填入表單的示例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-10-10
這篇文章主要介紹了vue-pdf打包后無法預(yù)覽問題及修復(fù)方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue微信分享 vue實(shí)現(xiàn)當(dāng)前頁面分享其他頁面
這篇文章主要為大家詳細(xì)介紹了vue微信分享功能，vue實(shí)現(xiàn)當(dāng)前頁面分享其他頁面，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-12-12
在vue中使用Echarts利用watch做動(dòng)態(tài)數(shù)據(jù)渲染操作
這篇文章主要介紹了在vue中使用Echarts利用watch做動(dòng)態(tài)數(shù)據(jù)渲染操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
動(dòng)畫詳解Vue3的Composition?Api
為讓大家更好的理解Vue3的Composition?Api本文采用了詳細(xì)的動(dòng)畫演繹，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
本文給大家詳細(xì)介紹了如何使用使用 vue.js腳手架工具vue-cli構(gòu)建大型單頁應(yīng)用的方法，非常的實(shí)用，有需要的小伙伴可以參考下2018-02-02
這篇文章主要介紹了vue給對象添加屬性沒有響應(yīng)式的問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要為大家詳細(xì)介紹了vue使用自定義指令實(shí)現(xiàn)拖拽，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
element-ui帶輸入建議的input框踩坑(輸入建議空白以及會(huì)閃出上一次的輸入建議問題)
這篇文章主要介紹了element-ui帶輸入建議的input框踩坑(輸入建議空白以及會(huì)閃出上一次的輸入建議問題)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01