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 相关文章推荐
对YUI扩展的Gird组件 Part-1
Mar 10 Javascript
checkbox 复选框不能为空
Jul 11 Javascript
使用JQuery进行跨域请求
Jan 25 Javascript
40个新鲜出炉的jQuery 插件和免费教程[上]
Jul 24 Javascript
Ajax请求在数据量大的时候出现超时的解决方法
Feb 27 Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
Jun 20 Javascript
jQuery实现数字加减效果汇总
Dec 16 Javascript
js实现导航吸顶效果
Feb 24 Javascript
json的结构与遍历方法实例分析
Apr 25 Javascript
jquery实现图片轮播器
May 23 jQuery
js 简易版滚动条实例(适用于移动端H5开发)
Jun 26 Javascript
vue axios封装httpjs,接口公用配置拦截操作
Aug 11 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/09/11 PHP
asp.net下利用js实现返回上一页的实现方法小集
2009/11/24 Javascript
基于jquery完美拖拽,可返回拖动轨迹
2012/03/29 Javascript
jquery插件制作 自增长输入框实现代码
2012/08/17 jQuery
拖动table标题实现改变td的大小(css+js代码)
2013/04/16 Javascript
jQuery处理xml格式的返回数据(实例解析)
2013/11/28 Javascript
js实现键盘操作实现div的移动或改变的原理及代码
2014/06/23 Javascript
jQuery CSS()方法改变现有的CSS样式表
2014/09/09 Javascript
基于jQuery实现的美观星级评论打分组件代码
2015/10/30 Javascript
基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)
2017/02/28 Javascript
微信小程序 wx.request方法的异步封装实例详解
2017/05/18 Javascript
微信小程序云开发之数据库操作
2019/05/18 Javascript
vue实现单一筛选、删除筛选条件
2020/10/26 Javascript
Python中的高级数据结构详解
2015/03/27 Python
python实现RSA加密(解密)算法
2016/02/17 Python
Python网络爬虫中的同步与异步示例详解
2018/02/03 Python
Python之csv文件从MySQL数据库导入导出的方法
2018/06/21 Python
django认证系统实现自定义权限管理的方法
2018/07/16 Python
用python打印菱形的实操方法和代码
2019/06/25 Python
Python终端输出彩色字符方法详解
2020/02/11 Python
利用Python中的Xpath实现一个在线汇率转换器
2020/09/09 Python
CSS3五个技巧给你的网站带来出色的效果
2009/04/02 HTML / CSS
html5的新增的标签和废除的标签简要概述
2013/02/20 HTML / CSS
HTML5标签与HTML4标签的区别示例介绍
2013/07/18 HTML / CSS
深深扎根运动世界的生活品牌:Tillys
2017/10/30 全球购物
大专毕业生自我鉴定
2013/11/21 职场文书
大学生2014全国两会学习心得体会
2014/03/10 职场文书
银行贷款承诺书
2014/03/29 职场文书
商场租赁意向书
2014/07/30 职场文书
庆祝教师节演讲稿
2014/09/03 职场文书
怎样写离婚协议书
2014/09/10 职场文书
裁员通知
2015/04/25 职场文书
世界名著读书笔记
2015/06/25 职场文书
学习新党章心得体会2016
2016/01/15 职场文书
十大必看国产动漫排名,魁拔上线,第二曾在日本播出
2022/03/18 国漫
python+opencv实现目标跟踪过程
2022/06/21 Python