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>
{{ }} 是所謂的文本插值的方法，目的是顯示雙向綁定的數據
mounted 表示el掛載到實例上調用的事件
beforeDestory 是實例銷毀以前調用
在上例中，在mounted事件中創(chuàng)建了一個定時器，每隔一秒就把當前時間寫入文本框中，由于雙向綁定的原因，H1標簽的文本也會跟著變化，和文本框的文本保持一致。在beforeDestory事件里在Vue實例銷毀前則會清除定時器
總結
以上所述是小編給大家介紹的Vue.js 踩坑記之雙向綁定，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
相關文章
下面小編就為大家?guī)硪黄獀ue引入jq插件的實例講解。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
Vue-router 中hash模式和history模式的區(qū)別
這篇文章主要介紹了Vue-router 中hash模式和history模式的區(qū)別，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要給大家介紹了關于Elementui按鈕設置默認選中狀態(tài)的實現過程,文中通過圖文以及示例代碼介紹的非常詳細,對大家學習或者使用Elementui具有一定的參考學習價值,需要的朋友可以參考下2023-07-07
本文將介紹幾種常見的?Vue?3?組件通信方法,包括?props、emits、provide?和?inject、事件總線以及?Vuex?狀態(tài)管理,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了在vue中如何引入外部less文件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vue3中的elementPlus全局組件中文轉換方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
今天小編就為大家分享一篇解決vue A對象賦值給B對象,修改B屬性會影響到A的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue自動路由-單頁面項目（非build時構建）,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04
這篇文章主要介紹了vue函數input輸入值請求時延遲1.5秒請求問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要為大家詳細介紹了vue彈窗消息組件的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-04-04