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+Dhtml:WEB程序员简易开发工具包(预先体验版)
Nov 07 Javascript
jQuery UI的Dialog无法提交问题的解决方法
Jan 11 Javascript
Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
Dec 26 Javascript
jquery中checkbox全选失效的解决方法
Dec 26 Javascript
JS实现淘宝支付宝网站的控制台菜单效果
Sep 28 Javascript
纯前端JavaScript实现Excel IO案例分享
Aug 26 Javascript
jQuery图片轮播功能实例代码
Jan 29 Javascript
基于Angular.js实现的触摸滑动动画实例代码
Feb 19 Javascript
利用jquery去掉时光轴头尾部线条的方法实例
Jun 16 jQuery
微信小程序实现点击效果
Jun 21 Javascript
vue实现直播间点赞飘心效果的示例代码
Sep 20 Javascript
layui prompt 设置允许空白提交的方法
Sep 24 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
Linux+Nginx+MySQL下配置论坛程序Discuz的基本教程
2015/12/23 PHP
PHP中大括号'{}'用法实例总结
2017/02/08 PHP
javascript 模式设计之工厂模式学习心得
2010/04/27 Javascript
ECMAScript 创建自己的js类库
2012/11/22 Javascript
js获取系统的根路径实现介绍
2013/09/08 Javascript
方便实用的jQuery checkbox复选框全选功能简单实例
2013/10/09 Javascript
jQuery动态添加、删除元素的方法
2014/01/09 Javascript
javascript判断是否按回车键并解决浏览器之间的差异
2014/05/13 Javascript
js函数内变量的作用域分析
2015/01/12 Javascript
javascript定时器完整实例
2015/02/10 Javascript
javascript中定义类的方法详解
2015/02/10 Javascript
JavaScript实现表格点击排序的方法
2015/05/11 Javascript
AngularJS使用指令增强标准表单元素功能
2016/07/01 Javascript
关于vue.js弹窗组件的知识点总结
2016/09/11 Javascript
canvas学习之API整理笔记(二)
2016/12/29 Javascript
Angularjs上传文件组件flowjs功能
2017/08/07 Javascript
基于js中的存储键值对以及注意事项介绍
2018/03/30 Javascript
JavaScript实现跟随鼠标移动的盒子
2021/01/28 Javascript
[02:19]DOTA2女子战队FOX视频专访:希望更多美眉一起加入
2013/10/15 DOTA
[50:21]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第二场
2018/08/19 DOTA
Python实现定时备份mysql数据库并把备份数据库邮件发送
2018/03/08 Python
Python简单实现的代理服务器端口映射功能示例
2018/04/08 Python
python递归函数绘制分形树的方法
2018/06/22 Python
PyCharm在新窗口打开项目的方法
2019/01/17 Python
Python Tkinter模块 GUI 可视化实例
2019/11/20 Python
Jupyter notebook 启动闪退问题的解决
2020/04/13 Python
Html5监听手机摇一摇事件的实现
2019/11/07 HTML / CSS
连锁经营管理专业大学生求职信
2013/10/30 职场文书
大学旷课检讨书
2014/01/28 职场文书
学校出纳员岗位职责
2014/03/18 职场文书
群众路线领导班子整改方案
2014/10/25 职场文书
小学端午节活动总结
2015/02/11 职场文书
2015年行政部工作总结
2015/04/28 职场文书
培养联系人考察意见
2015/06/01 职场文书
解决SpringBoot文件上传临时目录找不到的问题
2021/07/01 Java/Android
数据分析数据库ClickHouse在大数据领域应用实践
2022/04/03 MySQL