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