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 相关文章推荐
仿163填写邮件地址自动显示下拉(无优化)
Nov 05 Javascript
用js小类库获取浏览器的高度和宽度信息
Jan 15 Javascript
JavaScript自动设置IFrame高度的小例子
Jun 08 Javascript
JS中的二叉树遍历详解
Mar 18 Javascript
js+css实现select的美化效果
Mar 24 Javascript
谈谈JavaScript的New关键字
Aug 26 Javascript
Node.js + Redis Sorted Set实现任务队列
Sep 19 Javascript
jquery延迟对象解析
Oct 26 Javascript
通过sails和阿里大于实现短信验证
Jan 04 Javascript
Angular整合zTree的示例代码
Jan 24 Javascript
webpack4 optimization使用总结
Nov 10 Javascript
详解elementUI中input框无法输入的问题
Apr 27 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格式化时间戳显示友好的时间实现思路及代码
2014/10/23 PHP
php中随机函数mt_rand()与rand()性能对比分析
2014/12/01 PHP
分享自定义的几个PHP功能函数
2015/04/15 PHP
PHP MPDF中文乱码的解决方式
2015/12/08 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
tp框架(thinkPHP)实现三次登陆密码错误之后锁定账号功能示例
2018/05/24 PHP
PHP时间戳和日期相互转换操作实例小结
2018/12/18 PHP
PHP基于面向对象封装的分页类示例
2019/03/15 PHP
Display SQL Server Version Information
2007/06/21 Javascript
Ext.MessageBox工具类简介
2009/12/10 Javascript
jquery autocomplete自动完成插件的的使用方法
2010/08/07 Javascript
图片延迟加载的实现代码(模仿懒惰)
2013/03/29 Javascript
javascript折半查找详解
2015/01/26 Javascript
深入理解JavaScript系列(30):设计模式之外观模式详解
2015/03/03 Javascript
JavaScript检测鼠标移动方向的方法
2015/05/22 Javascript
js实现上下左右弹框划出效果
2017/03/08 Javascript
详谈表单格式化插件jquery.serializeJSON
2017/06/23 jQuery
JavaScript判断输入是否为数字类型的方法总结
2017/09/28 Javascript
超出JavaScript安全整数限制的数字计算BigInt详解
2018/06/24 Javascript
解决vue的变量在settimeout内部效果失效的问题
2018/08/30 Javascript
vue3.0 搭建项目总结(详细步骤)
2019/05/20 Javascript
weui上传多图片,压缩,base64编码的示例代码
2020/06/22 Javascript
Python开发如何在ubuntu 15.10 上配置vim
2016/01/25 Python
JSONLINT:python的json数据验证库实例解析
2017/11/28 Python
Python简单计算文件MD5值的方法示例
2018/04/11 Python
APIStar:一个专为Python3设计的API框架
2018/09/26 Python
pycharm运行出现ImportError:No module named的解决方法
2018/10/13 Python
Python抓包程序mitmproxy安装和使用过程图解
2020/03/02 Python
python 数据库查询返回list或tuple实例
2020/05/15 Python
CSS3近阶段篇之酷炫的3D旋转透视
2016/04/28 HTML / CSS
1688平价精选商城:阿里集团旗下,工厂出厂价格直销
2017/04/24 全球购物
泰国办公用品购物网站:OfficeMate
2018/02/04 全球购物
员工年终演讲稿
2014/01/03 职场文书
公司领导班子召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
2014年统计工作总结
2014/11/21 职场文书
2014年销售助理工作总结
2014/12/01 职场文书