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 相关文章推荐
各浏览器对click方法的支持差异小结
Jul 31 Javascript
兼容IE、FireFox、Chrome等浏览器的xml处理函数js代码
Nov 30 Javascript
可恶的ie8提示缺少id未定义
Mar 20 Javascript
JavaScript调用ajax获取文本文件内容实现代码
Mar 28 Javascript
详解javascript函数的参数
Nov 10 Javascript
通过点击jqgrid表格弹出需要的表格数据
Dec 02 Javascript
jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
Dec 31 Javascript
JS返回只包含数字类型的数组实例分析
Dec 16 Javascript
JavaScript实现打地鼠小游戏
Apr 23 Javascript
vue中,在本地缓存中读写数据的方法
Sep 21 Javascript
微信小程序实现搜索指定景点周边美食、酒店
May 18 Javascript
js将URL网址转为16进制加密与解密函数
Mar 04 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代码 适用于登陆页面制作
2016/08/17 PHP
DEDE实现转跳属性文档在模板上调用出转跳地址
2016/11/04 PHP
浅谈php fopen下载远程文件的函数
2016/11/18 PHP
Laravel 集成微信用户登录和绑定的实现
2019/12/27 PHP
XRegExp 0.2: Now With Named Capture
2007/11/30 Javascript
瀑布流布局并自动加载实现代码
2013/03/12 Javascript
Javascript中valueOf与toString区别浅析
2013/03/19 Javascript
解析JavaScript中instanceof对于不同的构造器或许都返回true
2013/12/03 Javascript
用js判断输入是否为中文的函数
2014/03/10 Javascript
45个JavaScript编程注意事项、技巧大全
2015/02/11 Javascript
javascript 对象数组根据对象object key的值排序
2015/03/09 Javascript
用户代理字符串userAgent可实现的四个识别
2015/09/20 Javascript
Nodejs爬虫进阶教程之异步并发控制
2016/02/15 NodeJs
解决微信浏览器Javascript无法使用window.location.reload()刷新页面
2016/06/21 Javascript
纯css下拉菜单 无需js
2016/08/15 Javascript
浅谈js常用内置方法和对象
2016/09/24 Javascript
Bootstrap源码解读媒体对象、列表组和面板(10)
2016/12/26 Javascript
js/jq仿window文件夹移动/剪切/复制等操作代码
2017/03/08 Javascript
详解使用路由延迟加载 Angular 模块
2017/10/12 Javascript
解决使用bootstrap的dropdown部件时报错:error:Bootstrap dropdown require Popper.js问题
2018/08/30 Javascript
js删除数组中某几项的方法总结
2019/01/16 Javascript
浅谈Python的Django框架中的缓存控制
2015/07/24 Python
详解Python3中的Sequence type的使用
2015/08/01 Python
python 数据的清理行为实例详解
2017/07/12 Python
python 获取键盘输入,同时有超时的功能示例
2018/11/13 Python
Python爬虫——爬取豆瓣电影Top250代码实例
2019/04/17 Python
Django 中自定义 Admin 样式与功能的实现方法
2019/07/04 Python
python正则-re的用法详解
2019/07/28 Python
python 实现保存最新的三份文件,其余的都删掉
2019/12/22 Python
eDreams澳大利亚:预订机票、酒店和度假产品
2017/04/19 全球购物
微软新西兰官方网站:Microsoft New Zealand
2018/08/17 全球购物
美国办公用品折扣网站:Shoplet.com
2019/11/24 全球购物
C#如何允许一个类被继承但是避免这个类的方法被重载?
2015/02/24 面试题
中学生励志演讲稿
2014/04/26 职场文书
竞选纪律委员演讲稿
2014/09/13 职场文书
工作自我推荐信范文
2015/03/25 职场文书