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 相关文章推荐
精心挑选的15款优秀jQuery 本特效插件和教程
Aug 06 Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
Feb 09 Javascript
javascript设计模式之策略模式学习笔记
Feb 15 Javascript
vue2.0获取自定义属性的值
Mar 28 Javascript
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
Nov 28 Javascript
vue鼠标悬停事件实例详解
Apr 01 Javascript
vue组件 keep-alive 和 transition 使用详解
Oct 11 Javascript
JS自定义对象创建与简单使用方法示例
Jan 15 Javascript
通过实例解析JavaScript for in及for of区别
Jun 15 Javascript
Vue element-ui父组件控制子组件的表单校验操作
Jul 17 Javascript
实现AJAX异步调用和局部刷新的基本步骤
Mar 17 Javascript
Vue.Draggable实现交换位置
Apr 07 Vue.js
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提交表单发送邮件的方法
2015/03/20 PHP
Laravel 5框架学习之模型、控制器、视图基础流程
2015/04/08 PHP
关于JavaScript的面向对象和继承有利新手学习
2013/01/11 Javascript
web前端设计师们常用的jQuery特效插件汇总
2014/12/07 Javascript
jQuery设置指定网页元素宽度和高度的方法
2015/03/25 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
2016/01/18 Javascript
利用Javascript仿Excel的数据透视分析功能
2016/09/07 Javascript
bootstrap读书笔记之CSS组件(上)
2016/10/17 Javascript
如何防止INPUT按回车自动提交表单FORM
2016/12/06 Javascript
webpack打包单页面如何引用的js
2017/06/07 Javascript
使用jquery+iframe做一个ajax上传效果(实例)
2017/08/24 jQuery
vue2.0 可折叠列表 v-for循环展示的实例
2018/09/07 Javascript
vue-cli 构建骨架屏的方法示例
2018/11/08 Javascript
JSON.stringify()方法讲解
2019/01/31 Javascript
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
2019/06/10 Javascript
async/await让异步操作同步执行的方法详解
2019/11/01 Javascript
Vue computed 计算属性代码实例
2020/04/22 Javascript
javascript运行机制之执行顺序理解
2020/08/03 Javascript
JavaScript中如何调用Java方法
2020/09/16 Javascript
[03:42]2014DOTA2西雅图国际邀请赛 Navi战队巡礼
2014/07/07 DOTA
用实例说明python的*args和**kwargs用法
2013/11/01 Python
Python程序设计入门(4)模块和包
2014/06/16 Python
Python中无限元素列表的实现方法
2014/08/18 Python
利用Python脚本实现ping百度和google的方法
2017/01/24 Python
python 生成器生成杨辉三角的方法(必看)
2017/04/10 Python
解决python中遇到字典里key值为None的情况,取不出来的问题
2018/10/17 Python
对python中的高效迭代器函数详解
2018/10/18 Python
python引用(import)某个模块提示没找到对应模块的解决方法
2019/01/19 Python
PyTorch中反卷积的用法详解
2019/12/30 Python
使用CSS3制作倾斜导航条和毛玻璃效果
2017/09/12 HTML / CSS
手摸手教你用canvas实现给图片添加平铺水印的实现
2019/08/20 HTML / CSS
前台文员我鉴定
2014/01/12 职场文书
产品售后服务承诺书
2014/05/21 职场文书
公司自我介绍演讲稿
2014/08/21 职场文书
医生党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
优秀班主任事迹材料
2014/12/16 职场文书