006-v-model原理

v-model原理

  • 简介
  • v-model应用在输入框上
  • v-model应用在组件上

简介

由 属性绑定(v-bind:value=“searchText”) 配合 input事件监听(v-on:input=“searchText = event.target.value”) 实现。
应用在组件上由 props: {value: xxx } ,this.$emit(‘input’, xxx ) 完成。

v-model应用在输入框上

<body><div id="app"><input type="text" v-model="msg"><!-- 等同于 --><input type="text" :value="msg1" @input="msg1 = $event.target.value"><div>{{ msg }}</div><div>{{ msg1 }}</div></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el: '#app',data: {msg: '123',msg1: 'abc',},methods: {},computed: {},});</script>
</body>
  1. 数据更新时,需要页面同步更新:Vue属性绑定实现;
  2. 页面更新时,需要数据同步更新:监听input事件实现;

v-model应用在组件上

<body><div id="app"><div>v-model 父组件:{{modelInputText}}</div><component-model v-model="modelInputText"></component-model></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>// 注册全局组件Vue.component('component-model', {template: `<div><input type="text" :value="value" @input="updateVal" /><br /><span>v-model的子组件:{{value}}</span></div>`,props: ['value'],data: function () {return {text: 'componentOneText'}},methods: {updateVal(event) {this.$emit('input', event.target.value);}}})var app = new Vue({el: '#app',data: {modelInputText: 'hello v-model !',},methods: {},computed: {},});</script>
</body>
  1. 数据更新时,需要父组件同步更新:this.$emit(‘input’, xxx );
  2. 父组件更新时,需要子组件同步更新:props: {value: xxx };

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/733318.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

华为OD算法

【华为OD机考 统一考试机试C卷】开源项目热度榜单 题目描述 某个开源社区希望将最近热度比较高的开源项目出一个榜单&#xff0c;推荐给社区里面的开发者。对于每个开源项目&#xff0c;开发者可以进行关注(watch)、收藏(star)、fork、提issue、提交合并请求(MR)等。 数据库里…

代码随想录算法训练营day16 | 104.二叉树的最大深度、111.二叉树的最小深度、222.完全二叉树的节点个数

目录 二叉树的最大深度思路解题方法递归迭代 复杂度Code递归迭代 二叉树的最小深度思路解题方法递归迭代 复杂度Code递归迭代 第一题思路解题方法递归迭代 复杂度递归迭代 Code递归迭代 总结 二叉树的最大深度 链接: 二叉树的最大深度 二叉树的 最大深度 是指从根节点到最远叶…

滴滴一面:Keepalived+Nginx高可用,如何实现IP跳跃?(1)

尼恩说在前面 HashMap的工作原理是目前java面试问的较为常见的问题之一&#xff0c;在40岁老架构师 尼恩的读者交流群(50)中&#xff0c;最近有小伙伴拿到了一线互联网企业如得物、阿里、滴滴、极兔、有赞、shein 希音、百度、网易的面试资格&#xff0c;遇到很多很重要的面试…

OpenCV学习笔记(四)——对视频的读取操作

目录 读取视频内容 将彩色视频转换为灰色视频 读取视频内容 读取视频文件通常分为读取文件、验证是否打开成功打开文件、逐帧读取视频文件、释放资源和关闭窗口 &#xff08;1&#xff09;读取文件 在OpenCV中&#xff0c;通常使用VedioCapture来读取视频流&#xff0c;Vedi…

linux中的“<“、“<<“、“>“

当我们在命令行中执行一个命令时&#xff0c;通常需要指定命令所需的输入数据和输出目标。输入重定向符号 <、<< 和 > 就是用来处理这些输入输出的。 1. 命令 < 文件 这个符号表示将文件内容作为命令的标准输入。换句话说&#xff0c;命令将从指定的文件中读取…

SQL Server 技术100问?

这些问题旨在帮助SQL Server的管理员和开发人员深入理解数据库管理系统的核心概念和技术&#xff0c;从而更好地进行数据库设计、性能优化、安全管理等工作。 SQL Server的最新版本有哪些新特性&#xff1f;如何在SQL Server中创建一个新的数据库&#xff1f;如何在SQL Server…

图的单源最短路径问题

目录 一、简述 二、前置配置 三、迪杰斯特拉算法 四、改进的迪杰斯特拉算法 五、贝尔曼福特算法 一、简述 图是一种比较常用的数据结构&#xff0c;将问题转换成图相关的思路也是比较常用的。 图的单源最短路径问题&#xff0c;也就是图中某一个节点到图中其他节点的最短路…

基于JAVA+ springboot实现的抗疫物质信息管理系统

基于JAVA springboot实现的抗疫物质信息管理系统设计和实现 博主介绍&#xff1a;多年java开发经验&#xff0c;专注Java开发、定制、远程、文档编写指导等,csdn特邀作者、专注于Java技术领域 作者主页 央顺技术团队 Java毕设项目精品实战案例《1000套》 欢迎点赞 收藏 ⭐留言 …

macOS上实现「灵动岛」效果

自从Apple iPhone推出了「灵动岛」功能后&#xff0c;用户们就被其优雅的设计和强大的功能所吸引。然而&#xff0c;作为macOS用户&#xff0c;我们一直在等待这一功能能够在我们的设备上实现。现在&#xff0c;随着新的应用程序的推出&#xff0c;我们终于可以在我们的Mac上体…

JWT的是什么

session共享 什么是session共享 Session共享是指在分布式系统中&#xff0c;在多个服务器之间共享同一个用户的会话数据。在传统的Web应用中&#xff0c;用户的会话信息通常存储在服务器端的Session中&#xff0c;而每个用户的请求在同一个服务器上处理&#xff0c;因此可以轻…

AR实景儿童闯关游戏开发

AR实景儿童闯关游戏开发,增强现实&#xff08;Augmented Reality&#xff0c;AR&#xff09;技术正逐渐渗透到我们生活的方方面面。在游戏领域中&#xff0c;AR技术为游戏开发者带来了无限的想象空间和创作可能性。其中一种引人注目的游戏类型是AR实景儿童闯关游戏。这种游戏结…

【黑马程序员】Python基础

文章目录 初始PythonPython应用场景什么是编程语言安装Python开发环境第一个Python程序Python解释器 Python基础语法常用数值类型字符串总结 python中的注释变量数据类型数据类型转换标识符运算符算术运算服赋值运算符 字符串扩展字符串的三种定义方式字符串的引号嵌套字符串的…

Python_短路计算.md

Python_短路计算.md 一、概述二、原理说明三、and的短路应用四、or的短路应用 一、概述 Python中&#xff0c;短路计算&#xff08;Short-circuit evaluation&#xff09;指的是在布尔运算&#xff08;and 或 or&#xff09;中&#xff0c;当根据已有的条件能够确定整个表达式…

基于redis实现互斥锁

利用setnx命令实现类似获取锁和释放锁。 获取锁&#xff0c;setnx lock 1&#xff0c;返回值为1视为获取成功&#xff0c;为0视为获取失败 释放锁&#xff0c;del lock 特殊情况&#xff1a; 如果获取锁之后&#xff0c;锁来还来不及释放&#xff0c;redis宕机了&#xff0c;这…

java方法重载详细介绍

在Java中&#xff0c;方法重载&#xff08;Overloading&#xff09;是指在同一个类里面&#xff0c;可以有多个同名方法&#xff0c;只要这些方法的参数列表不同即可。方法重载是一种实现多态的方式&#xff0c;它增加了方法的可读性和程序的灵活性。 方法签名 方法签名由方法…

【CSP试题回顾】202009-2-风险人群筛查

CSP-202009-2-风险人群筛查 解题思路 主循环&#xff08;对每个查询&#xff09;&#xff1a; 使用一个布尔变量pass来标记风险人群是否至少一次进入了特定区域&#xff0c;以及一个布尔变量onlyOnce来确保停留计数 stayNum 在每次查询中最多只增加一次。内循环&#xff08;对…

面试官:如何保证缓存和数据库的一致性?

先更新数据库还是先更新缓存? 先说最基本的策略,一定要给缓存设置一个过期时间,避免异常情况下数据库和缓存长时间不一致 为了保证缓存和数据库的实时一致,我们不能用定时任务来更新缓存,我们要同时更新数据库和缓存,对应的方案有如下两种 先更新缓存,再更新数据库先更…

Linux 内核中处理阻塞访问的方法:等待队列

一. 简介 上一篇文章简单介绍了 什么是Linux阻塞与非阻塞IO。文章地址如下: Linux阻塞与非阻塞IO简介-CSDN博客 本文来学习Linux内核提供的唤醒阻塞进程机制:等待队列。 二. Linux 内核唤醒阻塞进程的机制:等待队列 阻塞访问最大的好处就是,当设备文件不可操作的时候进…

springboot252基于Springboot和vue的餐饮管理系统的设计与实现

餐饮管理系统的设计与实现 摘 要 互联网发展至今&#xff0c;无论是其理论还是技术都已经成熟&#xff0c;而且它广泛参与在社会中的方方面面。它让信息都可以通过网络传播&#xff0c;搭配信息管理工具可以很好地为人们提供服务。针对信息管理混乱&#xff0c;出错率高&…

xss.haozi.me:0X12

</script> <script>alert(1)\</script>