vue.js指令v-model实现方法


Posted in Javascript onDecember 05, 2016

V-MODEL 是VUE 的一个指令,在input 控件上使用时,可以实现双向绑定。

通过看文档,发现他不过是一个语法糖。

实际是通过下面的代码来实现的:

<%@ page language="java" contentType="text/html; charset=utf-8"
 pageEncoding="utf-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script type="text/javascript" src="vue/vue.js"></script>
</head>
<body>
 <div id="app-6">
 <input :value="person.name" @input="person.name = $event.target.value">
 <input :value="person.age" @input="person.age =$event.target.value">
 {{person}}
 </div>
 <script type="text/javascript">
 var app =new Vue({
 el: '#app-6',
 data:{
 person:{name:"ray",age:19}
 }
 })
 </script>
</body>
</html>

通过绑定绑定INPUT事件来更新对应对象的值。

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
MSN消息提示类
Sep 05 Javascript
javascript中利用数组实现的循环队列代码
Jan 24 Javascript
jQuery实现的立体文字渐变效果
May 17 Javascript
基于javascript 闭包基础分享
Jul 10 Javascript
Jquery通过JSON字符串创建JSON对象
Aug 24 Javascript
JavaScript每天定时更换皮肤样式的方法
Jul 01 Javascript
纯JS代码实现气泡效果
May 04 Javascript
ionic由于使用了header和subheader导致被遮挡的问题的两种解决方法
Sep 22 Javascript
js中scrollTop()方法和scroll()方法用法示例
Oct 03 Javascript
快速掌握jQuery插件开发
Jan 19 Javascript
JavaScript同源策略和跨域访问实例详解
Apr 03 Javascript
通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法
Aug 24 Javascript
DOM 事件的深入浅出(一)
Dec 05 #Javascript
使用微信小程序开发前端【快速入门】
Dec 05 #Javascript
学习vue.js表单控件绑定操作
Dec 05 #Javascript
JavaScript易错知识点整理
Dec 05 #Javascript
JS 对java返回的json格式的数据处理方法
Dec 05 #Javascript
原生js实现键盘控制div移动且解决停顿问题
Dec 05 #Javascript
bootstrap快速制作后台界面
Dec 05 #Javascript
You might like
php设计模式 Interpreter(解释器模式)
2011/06/26 PHP
php中将网址转换为超链接的函数
2011/09/02 PHP
php日历制作代码分享
2014/01/20 PHP
PHPCMS手机站伪静态设置详细教程
2017/02/06 PHP
js中文逗号转英文实现
2014/02/11 Javascript
jquery的trigger和triggerHandler的区别示例介绍
2014/04/20 Javascript
Visual Studio中js调试的方法图解
2014/06/30 Javascript
将页面table内容与样式另存成excel文件的方法
2015/08/05 Javascript
JQuery日期插件datepicker的使用方法
2016/03/03 Javascript
详解Angular-cli生成组件修改css成less或sass的实例
2017/07/27 Javascript
Vue2.0权限树组件实现代码
2017/08/29 Javascript
JS图片延迟加载插件LazyImgv1.0用法分析【附demo源码下载】
2017/09/04 Javascript
vue 集成 vis-network 实现网络拓扑图的方法
2019/08/07 Javascript
关于vue组件事件属性穿透详解
2019/10/28 Javascript
解决Vue在Tomcat8下部署页面不加载的问题
2019/11/12 Javascript
jQuery操作元素的内容和样式完整实例分析
2020/01/10 jQuery
Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
2020/08/28 Javascript
用Python编写一个简单的Lisp解释器的教程
2015/04/03 Python
改进Django中的表单的简单方法
2015/07/17 Python
Python 实现敏感目录扫描的示例代码
2020/05/21 Python
python设置中文界面实例方法
2020/10/27 Python
如何利用Python写个坦克大战
2020/11/18 Python
Python并发爬虫常用实现方法解析
2020/11/19 Python
Alpine安装Python3依赖出现的问题及解决方法
2020/12/25 Python
德国香水、化妆品和护理产品网上商店:Parfumdreams
2018/09/26 全球购物
Perfume’s Club澳大利亚官网:西班牙领先的在线美容店
2021/02/01 全球购物
公司成立感言
2014/01/11 职场文书
高二物理教学反思
2014/02/08 职场文书
外语系毕业生求职自荐信
2014/04/12 职场文书
员工工作自我评价
2014/09/26 职场文书
客户经理岗位职责
2015/01/31 职场文书
2015年数学教师工作总结
2015/05/20 职场文书
导游词之无锡唐城
2019/12/12 职场文书
CentOS 7安装mysql5.7使用XtraBackUp备份工具命令详解
2022/04/12 MySQL
利用Python实时获取steam特惠游戏数据
2022/06/25 Python
python缺失值填充方法示例代码
2022/12/24 Python