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 相关文章推荐
Autocomplete Textbox Example javascript实现自动完成成功
Aug 17 Javascript
JS复制内容到剪切板的实例代码(兼容IE与火狐)
Nov 19 Javascript
gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
Feb 21 Javascript
获取input标签的所有属性的方法
Jun 28 Javascript
谈谈JavaScript的New关键字
Aug 26 Javascript
JavaScript浮点数及运算精度调整详解
Oct 21 Javascript
jQuery中的一些小技巧
Jan 18 Javascript
详解Vue.js之视图和数据的双向绑定(v-model)
Jun 23 Javascript
js实现上传并压缩图片效果
Jan 10 Javascript
Vue模拟数据,实现路由进入商品详情页面的示例
Aug 31 Javascript
layui实现三级导航菜单
Jul 26 Javascript
JS PHP字符串截取函数实现原理解析
Aug 29 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的网址
2006/11/25 PHP
安装PHP可能遇到的问题“无法载入mysql扩展” 的解决方法
2007/04/16 PHP
php实现上传图片保存到数据库的方法
2015/02/11 PHP
PHP下使用mysqli的函数连接mysql出现warning: mysqli::real_connect(): (hy000/1040): ...
2016/02/14 PHP
PHP+Ajax实现验证码的实时验证
2016/07/20 PHP
php动态读取数据清除最右边距的方法
2017/04/12 PHP
laravel实现分页样式替换示例代码(增加首、尾页)
2017/09/22 PHP
thinkPHP实现基于ajax的评论回复功能
2018/06/22 PHP
PHP 图片处理
2020/09/16 PHP
javascript如何判断输入的url是否正确
2014/04/11 Javascript
JQuery 实现在同一页面锚点链接之间的平滑滚动
2014/10/29 Javascript
javascript实现消灭星星小游戏简单版
2016/11/15 Javascript
利用D3.js实现最简单的柱状图示例代码
2016/12/09 Javascript
jquery中用函数来设置css样式
2016/12/22 Javascript
原生Aajax 和jQuery Ajax 写法个人总结
2017/03/24 jQuery
Vue 2.0中生命周期与钩子函数的一些理解
2017/05/09 Javascript
详解vue-cli开发环境跨域问题解决方案
2017/06/06 Javascript
手把手搭建安装基于windows的Vue.js运行环境
2017/06/12 Javascript
js简易版购物车功能
2017/06/17 Javascript
JS获取浏览器地址栏的多个参数值的任意值实例代码
2018/07/24 Javascript
vue调试工具vue-devtools安装及使用方法
2018/11/07 Javascript
antd组件Upload实现自己上传的实现示例
2018/12/18 Javascript
Vue项目中使用better-scroll实现菜单映射功能方法
2019/09/11 Javascript
vue中watch的用法汇总
2020/12/28 Vue.js
用map函数来完成Python并行任务的简单示例
2015/04/02 Python
django DRF图片路径问题的解决方法
2018/09/10 Python
Python random模块制作简易的四位数验证码
2020/02/01 Python
Django+Django-Celery+Celery的整合实战
2021/01/20 Python
html5 canvas实现跟随鼠标旋转的箭头
2016/03/11 HTML / CSS
全球最大的生存食品、水和装备专用在线市场:BePrepared.com
2020/01/02 全球购物
学雷锋月活动总结
2014/04/25 职场文书
青春励志演讲稿范文
2014/08/25 职场文书
乡镇三严三实学习心得体会
2014/10/13 职场文书
2015年社区中秋节活动总结
2015/03/23 职场文书
(开源)微信小程序+mqtt,esp8266温湿度读取
2021/04/02 Javascript
pytorch实现ResNet结构的实例代码
2021/05/17 Python