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 相关文章推荐
js函数般调用正则
Apr 08 Javascript
自动刷新网页,自动刷新当前页面,JS调用
Jun 24 Javascript
JS JQUERY实现滚动条自动滚到底的方法
Jan 09 Javascript
js中的事件委托或是事件代理使用详解
Jun 23 Javascript
Kindeditor单独调用多图上传实例
Jul 31 Javascript
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
Nov 15 Javascript
如何选择适合你的JavaScript框架
Nov 20 Javascript
mpvue小程序仿qq左滑置顶删除组件
Aug 03 Javascript
详解javascript 变量提升(Hoisting)
Mar 12 Javascript
JavaScript偏函数与柯里化实例详解
Mar 27 Javascript
Vue基础学习之项目整合及优化
Jun 02 Javascript
产制造追溯系统之通过微信小程序实现移动端报表平台
Jun 03 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实现Ftp用户的在线管理的代码
2007/03/06 PHP
php源码分析之DZX1.5随机数函数random用法
2015/06/17 PHP
PHP分页初探 一个最简单的PHP分页代码的简单实现
2016/06/21 PHP
解析PHP之提取多维数组指定列的方法
2017/01/03 PHP
Yii2配置Nginx伪静态的方法
2017/05/05 PHP
js 数组克隆方法 小结
2010/03/20 Javascript
由Javascript实现的页面日历
2011/11/04 Javascript
JavaScript中对象属性的添加和删除示例
2014/05/12 Javascript
Javascript动态引用CSS文件的2种方法介绍
2014/06/06 Javascript
javascript父、子页面交互技巧总结
2014/08/08 Javascript
浅析jquery unbind()方法移除元素绑定的事件
2016/05/24 Javascript
js定义类的几种方法(推荐)
2016/06/08 Javascript
jQuery中JSONP的两种实现方式详解
2016/09/26 Javascript
js css自定义分页效果
2017/02/24 Javascript
微信小程序实现表单校验功能
2020/03/30 Javascript
实例分析js事件循环机制
2017/12/13 Javascript
解决vue中无法动态修改jqgrid组件 url地址的问题
2018/03/01 Javascript
基于jquery实现左右上下移动效果
2018/05/02 jQuery
JavaScript实现新年倒计时效果
2018/11/17 Javascript
Javascript和jquery在selenium的使用过程
2019/10/31 jQuery
webpack 如何同时输出压缩和未压缩的文件的实现步骤
2020/06/05 Javascript
JS创建自定义对象的六种方法总结
2020/12/15 Javascript
python使用os模块的os.walk遍历文件夹示例
2014/01/27 Python
Python双精度浮点数运算并分行显示操作示例
2017/07/21 Python
python Socket之客户端和服务端握手详解
2017/09/18 Python
python机器学习之神经网络(二)
2017/12/20 Python
使用CSS3的font-face字体嵌入样式的方法讲解
2016/05/13 HTML / CSS
css3中less实现文字长阴影(long shadow)
2020/04/24 HTML / CSS
html5读取本地文件示例代码
2014/04/22 HTML / CSS
ONLY瑞典官网:世界知名服装品牌
2018/06/19 全球购物
爱尔兰橄榄球店:Irish Rugby Store
2019/12/05 全球购物
翻译专业应届生求职信
2013/11/23 职场文书
2014基层党员批评与自我批评范文
2014/09/24 职场文书
大学生在校表现评语
2014/12/31 职场文书
个人落户申请书怎么写?
2019/06/28 职场文书
如何获取numpy array前N个最大值
2021/05/14 Python