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脚本实现Web页面信息交互
Dec 21 Javascript
JS继承 笔记
Jul 13 Javascript
JS trim去空格的最佳实践
Oct 30 Javascript
有关于JS辅助函数inherit()的问题
Apr 07 Javascript
JavaScript中this的使用详解
Nov 08 Javascript
JQuery控制Radio选中方法分析
May 29 Javascript
javascript中setTimeout使用指南
Jul 26 Javascript
JS实现的5级联动Select下拉选择框实例
Aug 17 Javascript
Router解决跨模块下的页面跳转示例
Jan 11 Javascript
node(koa2) web应用模块介绍详解
Mar 29 Javascript
JS使用new操作符创建对象的方法分析
May 30 Javascript
jQuery实现滑动开关效果
Aug 02 jQuery
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概述.
2006/10/09 PHP
php项目开发中用到的快速排序算法分析
2016/06/25 PHP
适合PHP初学者阅读的4本经典书籍
2016/09/23 PHP
php使用PDO下exec()函数查询执行后受影响行数的方法
2017/03/28 PHP
简单实现php上传文件功能
2017/09/21 PHP
jquery DOM操作 基于命令改变页面
2010/05/06 Javascript
javascript getElementsByTagName
2011/01/31 Javascript
javascript 构造函数强制调用经验总结
2012/12/02 Javascript
javascript设计模式之工厂模式示例讲解
2014/03/04 Javascript
浅谈JavaScript实现面向对象中的类
2014/12/09 Javascript
JS实现鼠标滑过折叠与展开菜单效果代码
2015/09/06 Javascript
jQuery文字横向滚动效果的实现代码
2016/05/31 Javascript
jQuery bt气泡实现悬停显示及移开隐藏功能的方法
2016/07/12 Javascript
微信小程序 video组件详解
2016/10/25 Javascript
NodeJS处理Express中异步错误
2017/03/26 NodeJs
详解如何在Vue2中实现组件props双向绑定
2017/03/29 Javascript
使用vue-cli(vue脚手架)快速搭建项目的方法
2018/05/21 Javascript
微信小程序基于Taro的分享图片功能实践详解
2019/07/12 Javascript
layui异步加载table表中某一列数据的例子
2019/09/16 Javascript
Vue项目页面跳转时浏览器窗口上方显示进度条功能
2020/03/26 Javascript
Vue项目接入Paypal实现示例详解
2020/06/04 Javascript
[02:34]肉山说——泡妞篇
2014/09/16 DOTA
python爬虫教程之爬取百度贴吧并下载的示例
2014/03/07 Python
Python二维码生成库qrcode安装和使用示例
2014/12/16 Python
利用Python脚本实现ping百度和google的方法
2017/01/24 Python
Python实现的基数排序算法原理与用法实例分析
2017/11/23 Python
详解使用django-mama-cas快速搭建CAS服务的实现
2019/10/30 Python
python迭代器常见用法实例分析
2019/11/22 Python
python第三方库学习笔记
2020/02/07 Python
CSS3+DIV实现漂亮的动画彩色标签
2016/06/16 HTML / CSS
html5 Canvas实现图片旋转的示例
2018/01/15 HTML / CSS
计算机专业优秀大学生自我总结
2014/01/21 职场文书
团队精神的演讲稿
2014/05/14 职场文书
法学专业毕业生自荐信
2014/06/11 职场文书
学生检讨书怎么写
2014/10/09 职场文书
Redis 异步机制
2022/05/15 Redis