Vue.js双向绑定实现步骤说明

来源：动视网责编：小采时间：2020-11-27 19:49:15

Vue.js双向绑定实现步骤说明

Vue.js双向绑定实现步骤说明:这次给大家带来Vue.js双向绑定实现步骤说明，Vue.js双向绑定实现的注意事项有哪些，下面就是实战案例，一起来看一下。这篇体验一下VUE的双向绑定<html> <head> <meta charset="utf-8"> </head&

推荐度：

点击下载本文 文档为doc格式

导读Vue.js双向绑定实现步骤说明:这次给大家带来Vue.js双向绑定实现步骤说明，Vue.js双向绑定实现的注意事项有哪些，下面就是实战案例，一起来看一下。这篇体验一下VUE的双向绑定<html> <head> <meta charset="utf-8"> </head&

这次给大家带来Vue.js双向绑定实现步骤说明，Vue.js双向绑定实现的注意事项有哪些，下面就是实战案例，一起来看一下。

这篇体验一下VUE的双向绑定

<html>
<head>
 <meta charset="utf-8">
</head>
<body>
 <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
 <p id="app">
 <input type="text" v-model="CurrentTime" placeholder="当前时刻">
 <h1>当前时刻{{ CurrentTime }}</h1>
 </p>
 <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>