用vue.js组件模拟v-model指令实例方法
作者:翱翔天地 发布时间:2022-04-16 10:12:23
标签:vue.js,模拟,v-model,指令
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>
0
投稿
猜你喜欢
- 集群是一种技术解决方案,它将硬件和软件结合起来,为Web、Email以及数据库等服务提供高可用性和高伸缩性的架构。本文将分析集群的类型,然后
- 第1题:Python里面如何实现tuple和list的转换?函数tuple(seq)可以把所有可迭代的(iterable)序列转换成一个tu
- Rel-License 是微格式的开发标准之一,简单的说就是通过给引用标签(通常是链接)加上REL属性,来标明所引用链接/数据与文章的关系。
- 四年前写的一个内容管理系统,应用在公司内部网上,昨天DBA说其中的SQL语句未使用参数化的调用,导致服务器负担加重,资源占用大。并列出了几个
- 1 运行SQLPLUS工具 sqlplus 2 以OS的默认身份连接 / as sysdba 3 显示当前用户名 show user 4 直
- 在我的上篇文章发出之后,我听到对“WEb2.0视觉风格”这个称谓的不认同声音。其实这并不出乎我的意料,因为,我在认真的开始思考“WEb2.0
- Union 与 Union ALL 的作用都是合并 SELECT 的查询结果集,那么它们有什么不同呢? Union 将查询到的结果集合并后进
- python包含子目录中的模块方法比较简单,关键是能够在sys.path里面找到通向模块文件的路径。下面将具体介绍几种常用情况:(1)主程序
- 与其它大多数语言一样,Python 也拥有 for 循环。你到现在还未曾看到它们的唯一原因就是,Python 在其它太多的方面表现出色,通常
- 新搞了台linux云主机,瞎折腾折腾,先装个Python3。Linux环境下有其他软件需要Python2,如YUM,所以安装的Python3
- 之前写过的组织结构和组织体系都太抽象了,读到标签系统我才有那种“略懂”的感觉。哈哈…书上提到的标签包括:导航情境式链接:常见的“更多”这种用
- jqGrid是一个优秀的基于jQuery的DataGrid框架,想必大伙儿也不陌生,网上基于ASP的资料很少,我提供一个,数据格式是json
- Python的property属性的功能是:property属性内部进行一系列的逻辑计算,最终将计算结果返回。使用property修饰的实例
- Python中的缩进(Indentation)决定了代码的作用域范围。这一点和传统的c/c++有很大的不同(传统的c/c++使用花括号{}符
- 在数据库查询的时候,我们有时有这样的需求,就是要找出数据表里指定范围行内的数据记录,比如说要找出数据表里第10行到第20行的这10条数据,那
- 本文给出一条 SQL 语句用于展示在同一名服务器上,不同的数据库间查询,注意当前连接用户要对两个库都有权限SQL Server 中 SQL
- 目录简介Spare data的例子SparseArraySparseDtypeSparse的属性Sparse的计算SparseSeries
- aspjpeg版本:v1.801 将pic.jpg打上logo.png,可根据图片大小对水印图做适当调整 &
- 前言with 这个关键字,对于每一学习Python的人,都不会陌生。操作文本对象的时候,几乎所有的人都会让我们要用 with open ,这
- 09年的电影缓缓的落下帷幕,以及新年伊始,轰轰烈烈催人癫狂的《阿凡达》。整年里,最让人我记忆深刻的还是《飞屋历险记》。Carl与Ellie被