DDR爱好者之家

用vue.js组件模拟v-model指令实例方法
站长资源 2026/4/11 佚名
8 1538
DDR爱好者之家 Design By 杰米

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="/UploadFiles/2021-04-08/vue.js">


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="/UploadFiles/2021-04-08/vue.js">
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米