Vue.js 踩坑记之双向绑定
时间:2019-04-14
本文章向大家介绍Vue.js 踩坑记之双向绑定,主要包括Vue.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事件中创建了一个定时器,每隔一秒就把当前时间写入文本框中,由于双向绑定的原因,H1标签的文本也会跟着变化,和文本框的文本保持一致。在beforeDestory事件里在Vue实例销毁前则会清除定时器
总结
以上所述是小编给大家介绍的Vue.js 踩坑记之双向绑定,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
- 【专知-关关的刷题日记20】Leetcode 119. Pascal's Triangle II
- 2017"百度之星"程序设计大赛 - 复赛1003&&HDU 6146 Pokémon GO【数学,递推,dp】
- 2017"百度之星"程序设计大赛 - 复赛1001&&HDU 6144 Arithmetic of Bomb【java大模拟】
- Java面向对象抽象类实例练习
- 经典JS闭包面试题
- Java面向对象接口的应用实例练习
- 【机器学习笔记之八】使用朴素贝叶斯进行文本的分类
- 【Java学习笔记之二十二】解析接口在Java继承中的用法及实例分析
- 扫一扫二维码就能打开网站,就能添加联系人,就能链接wifi(续)
- Java面向对象抽象类案例分析
- 【Java学习笔记之二十三】instanceof运算符的用法小结
- 基础才是重中之重~多线程的代价~我的内存都被吃了!
- 【Java学习笔记之二十八】深入了解Java8新特性
- 【Java学习笔记之二十四】对Java多态性的一点理解
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 【大家的项目】 socks5-rs 一个使用async-std的异步socks5 server实现
- JS浅拷贝与深拷贝
- 理解JS 原型链
- 关于跨域
- 创建对象的几种方法及优缺点
- 【Rust日报】2020-10-02 移动操作系统SailfishOS支持Rust了
- Git
- 网络协议
- 【crossbeam系列】5 crossbeam-util和crossbeam-queue:一些实用的小东西
- 数据结构
- 静态博客自动化部署教程
- 【每周一库】 Sincere - a micro web framework for Rust
- 小米路由器 HD(R3D) 折腾笔记
- Deepin 系统科学上网 PAC 自动代理
- 十分钟快速搭建内网穿透工具 —— frp