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数组组合成字符串的脚本
Jan 06 Javascript
jquery 面包屑导航 具体实现
Jun 05 Javascript
jQuery防止click双击多次提交及传递动态函数或多参数
Apr 02 Javascript
JS实现可自定义大小,可双击关闭的弹出层效果
Oct 16 Javascript
jQuery实现的checkbox级联选择下拉菜单效果示例
Dec 26 Javascript
JavaScript通过mouseover()实现图片变大效果的示例
Dec 20 Javascript
在vue项目中集成graphql(vue-ApolloClient)
Sep 08 Javascript
使用React手写一个对话框或模态框的方法示例
Apr 25 Javascript
vue 实现搜索的结果页面支持全选与取消全选功能
May 10 Javascript
js实现秒表计时器
Dec 16 Javascript
详解vue beforeEach 死循环问题解决方法
Feb 25 Javascript
JavaScript 几种循环方式以及模块化的总结
Sep 03 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 存储文本换行实现方法
2010/01/05 PHP
常见的PHP五种设计模式小结
2011/03/23 PHP
ajax完美实现两个网页 分页功能的实例代码
2013/04/16 PHP
PHP CURL post数据报错 failed creating formpost data
2016/10/16 PHP
ThinkPHP框架整合微信支付之刷卡模式图文详解
2019/04/10 PHP
Js中sort()方法的用法
2006/11/04 Javascript
jQuery EasyUI API 中文文档 - ComboTree组合树
2011/10/11 Javascript
理解js回收机制通俗易懂版
2016/02/29 Javascript
JavaScript实现窗口抖动效果
2016/10/19 Javascript
Node.js中路径处理模块path详解
2016/11/14 Javascript
详解Node项目部署到云服务器上
2017/07/12 Javascript
jQuery模拟爆炸倒计时功能实例代码
2017/08/21 jQuery
Angular项目从新建、打包到nginx部署全过程记录
2017/12/09 Javascript
vue2.0 常用的 UI 库实例讲解
2017/12/12 Javascript
详解操作虚拟dom模拟react视图渲染
2018/07/25 Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
2019/08/07 Javascript
基于vue和websocket的多人在线聊天室
2020/02/01 Javascript
为什么JavaScript中0.1 + 0.2 != 0.3
2020/12/03 Javascript
原生js实现放大镜组件
2021/01/22 Javascript
[02:01]2018完美盛典-开场舞《双子星》
2018/12/16 DOTA
浅谈Python中copy()方法的使用
2015/05/21 Python
Python虚拟环境virtualenv的安装与使用详解
2017/05/28 Python
关于反爬虫的一些简单总结
2017/12/13 Python
python PyTorch参数初始化和Finetune
2018/02/11 Python
flask框架渲染Jinja模板与传入模板变量操作详解
2020/01/25 Python
html5本地存储 localStorage操作使用详解
2016/09/20 HTML / CSS
详解如何将 Canvas 绘制过程转为视频
2021/01/25 HTML / CSS
西班牙最大的婴儿用品网上商店:Bebitus
2019/05/30 全球购物
什么是TCP/IP
2014/07/27 面试题
制作部班长职位说明书
2014/02/26 职场文书
个人对照检查材料思想汇报(四风问题)
2014/09/25 职场文书
镇党政领导班子民主生活会思想汇报
2014/10/11 职场文书
聘任证明怎么写
2015/03/02 职场文书
Nginx搭建rtmp直播服务器实现代码
2021/03/31 Servers
Python 快速验证代理IP是否有效的方法实现
2021/07/15 Python
python双向链表实例详解
2022/05/25 Python