用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 第一步 hello world
Sep 25 Python
python实现马耳可夫链算法实例分析
May 20 Python
Python3.6正式版新特性预览
Dec 15 Python
Python正则表达式实现截取成对括号的方法
Jan 06 Python
Python+OpenCV让电脑帮你玩微信跳一跳
Jan 04 Python
利用Pandas读取文件路径或文件名称包含中文的csv文件方法
Jul 04 Python
Python基于聚类算法实现密度聚类(DBSCAN)计算【测试可用】
Dec 26 Python
Python中栈、队列与优先级队列的实现方法
Jun 30 Python
python sqlite的Row对象操作示例
Sep 11 Python
TensorFlow实现checkpoint文件转换为pb文件
Feb 10 Python
Python多进程编程常用方法解析
Mar 26 Python
python实现MD5进行文件去重的示例代码
Jul 09 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 超链接 抓取实现代码
2009/06/29 PHP
php模拟socket一次连接,多次发送数据的实现代码
2011/07/26 PHP
php输出指定时间以前时间格式的方法
2015/03/21 PHP
PHP-X系列教程之内置函数的使用示例
2017/10/16 PHP
PHP面向对象程序设计(OOP)之方法重写(override)操作示例
2018/12/21 PHP
Javascript学习笔记9 prototype封装继承
2010/01/11 Javascript
如何将网页表格内容导入excel
2014/02/18 Javascript
8个实用的jQuery技巧
2014/03/04 Javascript
Javascript加载速度慢的解决方案
2014/03/11 Javascript
jquery使用正则表达式验证email地址的方法
2015/01/22 Javascript
javascript关于继承解析
2016/05/10 Javascript
20分钟打造属于你的Bootstrap站点
2016/07/27 Javascript
jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
2016/12/22 Javascript
小程序多图列表实现性能优化的方法步骤
2019/05/28 Javascript
vue elementUI 表单校验功能之数组多层嵌套
2019/06/04 Javascript
JavaScript运动原理基础知识详解
2020/04/02 Javascript
vue递归获取父元素的元素实例
2020/08/07 Javascript
vue+swiper实现左右滑动的测试题功能
2020/10/30 Javascript
[42:39]老党炸弹人试玩视频
2014/09/03 DOTA
[03:41]DOTA2上海特锦赛小组赛第三日recap精彩回顾
2016/02/28 DOTA
[39:52]2018DOTA2亚洲邀请赛 4.3 突围赛 EG vs Newbee 第一场
2018/04/04 DOTA
举例讲解Python面相对象编程中对象的属性与类的方法
2016/01/19 Python
你所不知道的Python奇技淫巧13招【实用】
2016/12/14 Python
教你使用python实现微信每天给女朋友说晚安
2018/03/23 Python
PyCharm搭建Spark开发环境实现第一个pyspark程序
2019/06/13 Python
Python object类中的特殊方法代码讲解
2020/03/06 Python
Python实现aes加密解密多种方法解析
2020/05/15 Python
python中通过pip安装库文件时出现“EnvironmentError: [WinError 5] 拒绝访问”的问题及解决方案
2020/08/11 Python
Python调用飞书发送消息的示例
2020/11/10 Python
python的数学算法函数及公式用法
2020/11/18 Python
党的生日活动方案
2014/08/15 职场文书
同意迁入证明模板
2014/10/26 职场文书
幼儿园开学温馨提示
2015/07/15 职场文书
家庭教育教师培训学习体会
2016/01/14 职场文书
idea下配置tomcat避坑详解
2022/04/12 Servers
python垃圾回收机制原理分析
2022/04/13 Python