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 相关文章推荐
一些常用的Javascript函数
Dec 22 Javascript
jQuery UI-Draggable 参数集合
Jan 10 Javascript
JavaScript编程开发中的五个实用小技巧
Jul 22 Javascript
解决javascript:window.close()在chrome,Firefox下失效的问题
May 07 Javascript
使用js Math.random()函数生成n到m间的随机数字
Oct 09 Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
Dec 12 Javascript
URL中“#” “?” &amp;“”号的作用浅析
Feb 04 Javascript
js实现网页定位导航功能
Mar 07 Javascript
详解VUE中常用的几种import(模块、文件)引入方式
Jul 03 Javascript
详解webpack4之splitchunksPlugin代码包分拆
Dec 04 Javascript
Vue.js实现的购物车功能详解
Jan 27 Javascript
详解vue-cli@2.x项目迁移日志
Jun 06 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数组函数序列之array_search()- 按元素值返回键名
2011/11/04 PHP
浅析php中jsonp的跨域实例
2013/06/21 PHP
PHP实现微信公众号验证Token的示例代码
2019/12/16 PHP
javascript操作文本框readOnly
2007/05/15 Javascript
javascript jQuery插件练习
2008/12/24 Javascript
jQuery 页面 Mask实现代码
2010/01/09 Javascript
关于javascript function对象那些迷惑分析
2011/10/24 Javascript
js使用栈来实现10进制转8进制与取除数及余数
2014/06/11 Javascript
一波JavaScript日期判断脚本分享
2016/03/06 Javascript
js中最容易被忽视的事件问题大总结
2016/05/15 Javascript
浅谈JavaScript变量的自动转换和语句
2016/06/12 Javascript
Bootstrap Table从服务器加载数据进行显示的实现方法
2016/09/29 Javascript
vue.js指令v-for使用及索引获取
2016/11/03 Javascript
javascript中递归的两种写法
2017/01/17 Javascript
微信小程序本作用域下调用全局JS详解及实例
2017/02/22 Javascript
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
2017/03/02 Javascript
Bootstrap按钮组简单实现代码
2017/03/06 Javascript
基于iScroll实现下拉刷新和上滑加载效果
2017/07/18 Javascript
浅谈原型对象的常用开发模式
2017/07/22 Javascript
JS表单传值和URL编码转换
2018/03/03 Javascript
iview日期控件,双向绑定日期格式的方法
2018/03/15 Javascript
vue项目中播放rtmp视频文件流的方法
2020/09/17 Javascript
[01:55]2014DOTA2国际邀请赛 BBC正赛第一天总结
2014/07/10 DOTA
[49:08]FNATIC vs Infamous 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python提取网页中超链接的方法
2016/09/18 Python
PyCharm搭建Spark开发环境实现第一个pyspark程序
2019/06/13 Python
Django 创建新App及其常用命令的实现方法
2019/08/04 Python
python 函数嵌套及多函数共同运行知识点讲解
2020/03/03 Python
POP文化和音乐灵感的时尚:Hot Topic
2019/06/19 全球购物
生活部的活动方案
2014/08/19 职场文书
党员干部四风问题整改措施思想汇报
2014/10/12 职场文书
离婚协议书范本(通用篇)
2014/11/30 职场文书
导游欢送词
2015/01/31 职场文书
网站文案策划岗位职责
2015/04/14 职场文书
工商行政处罚决定书
2015/06/24 职场文书
烈士陵园扫墓感想
2015/08/07 职场文书