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 相关文章推荐
对字符串进行HTML编码和解码的JavaScript函数
Feb 01 Javascript
jQuery中live方法的重复绑定说明
Oct 21 Javascript
ExtJS4 Grid改变单元格背景颜色及Column render学习
Feb 06 Javascript
javascript 3d 逐侦产品展示(核心精简)
Mar 26 Javascript
jQuery EasyUI实现右键菜单变灰不可用效果
Sep 24 Javascript
JS创建对象的写法示例
Nov 04 Javascript
基于jquery日历价格、库存等设置插件
Jul 05 jQuery
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
Sep 26 Javascript
JS+canvas画布实现炫酷的旋转星空效果示例
Feb 13 Javascript
bootstrap-paginator服务器端分页使用方法详解
Feb 13 Javascript
Javascript实现鼠标移入方向感知
Jun 24 Javascript
使用Ajax实现无刷新上传文件
Apr 12 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
2006/12/13 PHP
PHP计算百度地图两个GPS坐标之间距离的方法
2015/01/09 PHP
CI配置多数据库访问的方法
2016/03/28 PHP
一个不错的用JavaScript实现的UBB编码函数
2007/03/09 Javascript
javascript URL锚点取值方法
2009/02/25 Javascript
javascript中的array数组使用技巧
2010/01/31 Javascript
window.addEventListener来解决让一个js事件执行多个函数
2012/12/26 Javascript
js打开新窗口方法整理
2014/02/17 Javascript
json中换行符的处理方法示例介绍
2014/06/10 Javascript
jQuery菜单插件用法实例
2015/07/25 Javascript
详解js中call与apply关键字的作用
2016/11/21 Javascript
微信小程序 require机制详解及实例代码
2016/12/14 Javascript
ReactNative之键盘Keyboard的弹出与消失示例
2017/07/11 Javascript
详解Angular4 路由设置相关
2017/08/26 Javascript
Angular2仿照微信UI实现9张图片上传和预览的示例代码
2017/10/19 Javascript
layui 富文本编辑器和textarea值的相互传递方法
2019/09/18 Javascript
JavaScript实现拖拽盒子效果
2020/02/06 Javascript
[06:43]DAC2018 4.5 SOLO赛 Maybe vs Paparazi
2018/04/06 DOTA
在Python的框架中为MySQL实现restful接口的教程
2015/04/08 Python
解决Django layui {{}}冲突的问题
2019/08/29 Python
Python爬取豆瓣视频信息代码实例
2019/11/16 Python
Python实现图片批量加入水印代码实例
2019/11/30 Python
美国百年历史早餐食品供应商:Wolferman’s
2017/01/18 全球购物
苏宁红孩子母婴商城:redbaby
2017/02/12 全球购物
美国孕妇装购物网站:Motherhood Maternity
2019/09/22 全球购物
三项教育活动实施方案
2014/03/30 职场文书
超市开店计划书
2014/04/26 职场文书
大学生优秀班干部事迹材料
2014/05/26 职场文书
副总经理岗位职责
2015/02/02 职场文书
上班迟到检讨书
2015/05/06 职场文书
HTML页面滚动时部分内容位置固定不滚动的实现
2021/04/14 HTML / CSS
python中opencv实现图片文本倾斜校正
2021/06/11 Python
Spring Cache和EhCache实现缓存管理方式
2021/06/15 Java/Android
手把手教你实现PyTorch的MNIST数据集
2021/06/28 Python
MySQL系列之六 用户与授权
2021/07/02 MySQL
Python OpenCV超详细讲解调整大小与图像操作的实现
2022/04/02 Python