当前位置： 移动技术网 > IT编程>脚本编程>vue.js > Vue.js 踩坑记之双向绑定

Vue.js 踩坑记之双向绑定

2019年06月06日  | 移动技术网IT编程  | 我要评论

锦衣夜行小说,碧血神雕鹿鼎记,品质管理

这篇体验一下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事件中创建了一个定时器，每隔一秒就把当前时间写入文本框中，由于双向绑定的原因，h1标签的文本也会跟着变化，和文本框的文本保持一致。在beforedestory事件里在vue实例销毁前则会清除定时器

总结

以上所述是小编给大家介绍的vue.js 踩坑记之双向绑定，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网