Vue.js踩坑双向绑定

本文体验了VUE的双向绑定

html head meta charset=' utf-8 '/head body Script src=' http :3359 unpkg.com/vue/dist/vue . min . js '/Script div id=' app '输入类型=' text' v-model=' currenttime '占位符=' current time ' h1 current time { { current time } }/h1/div Script var app=new vue({ El 3360 ' # app '，data: { CurrentTime:this . timer=setInterval(function(){ _ this。CurrentTime=新日期()；},1000);}，befordestroy : function(){ if(this . timer){ clearInterval(this . timer)；} } });/脚本/正文/html

{{}}是一种所谓的文本插值方法，旨在显示双向绑定数据

已装载表示当el装载到实例上时调用的事件

在实例销毁之前调用BeforeDestory

在上面的示例中，在挂载的事件中创建了一个计时器，并且当前时间每秒都被写入文本框。由于双向绑定，H1标签的文本将相应改变，这与文本框的文本一致。在beforeDestory事件中，计时器将在Vue实例被销毁之前被清除

摘要

以上是边肖介绍的Vue.js踩坑的双向绑定。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！