用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辅助软件思路及图像识别源码解析
Jan 04 Python
Python使用matplotlib模块绘制图像并设置标题与坐标轴等信息示例
May 04 Python
Python+OpenCV图片局部区域像素值处理详解
Jan 23 Python
python仿抖音表白神器
Apr 08 Python
python爬虫之自制英汉字典
Jun 24 Python
Django上线部署之IIS的配置方法
Aug 22 Python
复化梯形求积分实例——用Python进行数值计算
Nov 20 Python
python同义词替换的实现(jieba分词)
Jan 21 Python
谈谈Python:为什么类中的私有属性可以在外部赋值并访问
Mar 05 Python
如何在mac版pycharm选择python版本
Jul 21 Python
详解Python调用系统命令的六种方法
Jan 28 Python
python+selenium小米商城红米K40手机自动抢购的示例代码
Mar 24 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
js和php邮箱地址验证的实现方法
2014/01/09 PHP
php利用单例模式实现日志处理类库
2014/02/10 PHP
JavaScript去除空格的几种方法
2006/10/03 Javascript
灵活应用js调试技巧解决样式问题的步骤分享
2012/03/15 Javascript
浅谈$_FILES数组为空的原因
2017/02/16 Javascript
js实现下拉菜单效果
2017/03/01 Javascript
mac下的nodejs环境安装的步骤
2017/05/24 NodeJs
讲解vue-router之命名路由和命名视图
2018/05/28 Javascript
微信小程序实现漂亮的弹窗效果
2020/05/26 Javascript
详解vue axios用post提交的数据格式
2018/08/07 Javascript
bootstrap自定义样式之bootstrap实现侧边导航栏功能
2018/09/10 Javascript
使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法
2020/02/10 Javascript
逐行分析鸿蒙系统的 JavaScript 框架(推荐)
2020/09/17 Javascript
一个基于flask的web应用诞生 bootstrap框架美化(3)
2017/04/11 Python
使用Django Form解决表单数据无法动态刷新的两种方法
2017/07/14 Python
Python基于回溯法子集树模板解决全排列问题示例
2017/09/07 Python
对Tensorflow中权值和feature map的可视化详解
2018/06/14 Python
python异步实现定时任务和周期任务的方法
2019/06/29 Python
使用python去除图片白色像素的实例
2019/12/12 Python
Python验证码截取识别代码实例
2020/05/16 Python
python字典通过值反查键的实现(简洁写法)
2020/09/30 Python
Python脚本调试工具安装过程
2021/01/11 Python
YSL圣罗兰美妆美国官网:Yves Saint Lauret US
2016/11/21 全球购物
澳大利亚墨水站Ink Station:墨水和碳粉打印机墨盒
2019/03/24 全球购物
俄罗斯电子产品、计算机和家用电器购物网站:OLDI
2019/10/27 全球购物
校长岗位职责
2013/11/26 职场文书
违反课堂纪律检讨书
2014/01/19 职场文书
丑小鸭教学反思
2014/02/03 职场文书
小学五年级学生评语
2014/04/22 职场文书
英语专业求职信
2014/07/08 职场文书
作风整顿剖析材料
2014/09/30 职场文书
兵马俑导游词
2015/02/02 职场文书
农业项目合作意向书
2015/05/08 职场文书
焦点访谈观后感
2015/06/11 职场文书
《悬崖边的树》读后感2篇
2019/12/02 职场文书
python中 Flask Web 表单的使用方法
2022/05/20 Python