用vue.js组件模拟v-model指令实例方法


Posted in Python onJuly 05, 2019

1、问题描述

在使用v-model指令实现输入框数据双向绑定,输入值时对应的这个变量的值也随着变化;但是这里不允许使用v-model,需要写一个组件实现v-model指令效果

<div id="user">
  <input type="text" v-model="username">
  <label>{{username}}</label>
</div>
 
<script>
  let v = new Vue({
    el:'#user',
    data:{
     username:'zhangsan'
    }
  })
</script>

2、实现源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue模拟v-model指令</title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="datas">
			<input-model :value="num" @inputchange="num=arguments[0]"></input-model>
			<br>
			<span>
				{{num}}
			</span>
		</div>
		<script>
			Vue.component('input-model',{
				template:`<input type="text" :svalue="cvalue" @input="updateInput">`,
				computed: {
					cvalue() {
						return this.svalue 
					}
				},
				props:['svalue'],
				methods: {
					updateInput: function(event){
						let values = event.target.value
						this.$emit('inputchange',values)
					}
				}
			});
			
			let v = new Vue({
				el:'#datas',
				data: {
					num:'1'
				}
			})
		</script>
	</body>
</html>

3、注意事项

(1)父组件中使用子组件,绑定的inputchange必须小写,不能使用inputChange;

(2)子组件中的cvalue和计算属性中的要保持一致;

(3)子组件中的@input和父组件中的@inputchange没有必然关系;

(4)this.$emit('inputchange',values)中的inputchange要和DOM元素中的input-model一致

(5)父组件将num值通过props属性传到子组件中;子组件通过$emit触发当前实例上的事件,将改变的值传给父组件

内容扩展:

vue.js指令v-model实现方法

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>
Python 相关文章推荐
Python实现的简单万年历例子分享
Apr 25 Python
Python内置函数Type()函数一个有趣的用法
Feb 18 Python
用于统计项目中代码总行数的Python脚本分享
Apr 21 Python
以一个投票程序的实例来讲解Python的Django框架使用
Feb 18 Python
Python基于回溯法子集树模板解决数字组合问题实例
Sep 02 Python
Python调用服务接口的实例
Jan 03 Python
python中用logging实现日志滚动和过期日志删除功能
Aug 20 Python
Python 实用技巧之利用Shell通配符做字符串匹配
Aug 23 Python
Tensorflow分批量读取数据教程
Feb 07 Python
python3 sorted 如何实现自定义排序标准
Mar 12 Python
python实现文件+参数发送request的实例代码
Jan 05 Python
python线程优先级队列知识点总结
Feb 28 Python
python买卖股票的最佳时机(基于贪心/蛮力算法)
Jul 05 #Python
Python 计算任意两向量之间的夹角方法
Jul 05 #Python
python实现两个经纬度点之间的距离和方位角的方法
Jul 05 #Python
Python3+Appium实现多台移动设备操作的方法
Jul 05 #Python
Python PIL读取的图像发生自动旋转的实现方法
Jul 05 #Python
python读出当前时间精度到秒的代码
Jul 05 #Python
python读写csv文件方法详细总结
Jul 05 #Python
You might like
PHP中file_exists与is_file,is_dir的区别介绍
2012/09/12 PHP
深入mysql_fetch_row()与mysql_fetch_array()的区别详解
2013/06/05 PHP
单台服务器的PHP进程之间实现共享内存的方法
2014/06/13 PHP
php从数据库查询结果生成树形列表的方法
2015/04/17 PHP
php过滤所有的空白字符(空格、全角空格、换行等)
2015/10/27 PHP
PHP中时间加减函数strtotime用法分析
2017/04/26 PHP
PHP实现用session来实现记录用户登陆信息
2018/10/15 PHP
硬盘浏览程序,保存成网页格式便可使用
2006/12/03 Javascript
fancybox modal的完美解决(右上的X)
2012/10/30 Javascript
JS获取下拉列表所选中的TEXT和Value的实现代码
2014/01/11 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
2016/01/26 Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
2017/03/25 Javascript
ES6中新增的Object.assign()方法详解
2017/09/22 Javascript
vue devtools的安装与使用教程
2018/08/08 Javascript
三种Webpack打包方式(小结)
2018/09/19 Javascript
详解Angular中实现自定义组件的双向绑定的两种方法
2018/11/23 Javascript
如何从0开始用node写一个自己的命令行程序
2018/12/29 Javascript
Vue动画事件详解及过渡动画实例
2019/02/09 Javascript
vue cli3.0结合echarts3.0与地图的使用方法示例
2019/03/26 Javascript
[10:49]2014国际邀请赛 叨叨刀塔第二期为真正的电竞喝彩
2014/07/21 DOTA
Python+Socket实现基于UDP协议的局域网广播功能示例
2017/08/31 Python
详解python OpenCV学习笔记之直方图均衡化
2018/02/08 Python
python获取微信企业号打卡数据并生成windows计划任务
2019/04/30 Python
Python 中的 global 标识对变量作用域的影响
2019/08/12 Python
Python绘图之二维图与三维图详解
2020/08/04 Python
用HTML5制作烟火效果的教程
2015/05/12 HTML / CSS
Soft Cotton捷克:来自爱琴海棉花的浴袍
2017/02/01 全球购物
ALDO英国官网:加拿大女鞋品牌
2018/02/19 全球购物
澳大利亚女士时装在线:Rockmans
2018/09/26 全球购物
后勤自我鉴定
2013/10/13 职场文书
车间主任岗位职责
2014/03/16 职场文书
《第一次抱母亲》教学反思
2014/04/16 职场文书
护林防火标语
2014/06/27 职场文书
局领导领导班子四风对照检查材料
2014/09/27 职场文书
2015年社区宣传工作总结
2015/05/20 职场文书
团支部组织委员竞选稿
2015/11/21 职场文书