第二十四章 v-model原理及v-model简化表单类组件封装

news2024/11/22 13:36:39

目录

一、v-model 原理

二、表单类组件封装

三、v-model简化组件封装代码 


一、v-model 原理

原理:v-model本质上是一个语法糖。例如应用在输入框上,就是 value属性 input事件 的合写。

作用:提供数据的双向绑定

数据变,视图跟着变 :value

视图变,数据跟着变 @input

注意:$event 用于在模板中,获取事件的形参

<template>
  <div id="app">
    <input v-model="msg1" type="text"><br><br>
    <input :value="msg2" @input="msg2 = $e.target.value" type="text"><br><br>
  </div>
</template>

<script>
export default {
 data () {
  return {
    msg1: '',
    msg2: ''
  }
 }
}
</script>

<style>

</style>

二、表单类组件封装

1. 表单类组件 封装

① 父传子:数据 应该是父组件 props 传递 过来的,拆解 v-model 绑定数据

② 子传父:监听输入,子传父传值给父组件修改

三、v-model简化组件封装代码 

父组件v-model简化代码,实现子组件和父组件数据双向绑定,等同于上面的表单类封装方法。

① 子组件中:props通过value接收,事件触发input

② 父组件中:v-model 给组件直接绑数据  ( :value + @input )

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

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

相关文章

机器学习中的数据可视化:常用库、单变量图与多变量图绘制方法

《博主简介》 小伙伴们好&#xff0c;我是阿旭。专注于人工智能、AIGC、python、计算机视觉相关分享研究。 ✌更多学习资源&#xff0c;可关注公-仲-hao:【阿旭算法与机器学习】&#xff0c;共同学习交流~ &#x1f44d;感谢小伙伴们点赞、关注&#xff01; 《------往期经典推…

SELS-SSL/TLS

一、了解公钥加密&#xff08;非对称加密&#xff09; 非对称加密中&#xff0c;用于加密数据的密钥与用于解密数据的密钥不同。私钥仅所有者知晓&#xff0c;而公钥则可自由分发。发送方使用接收方的公钥对数据进行加密&#xff0c;数据仅能使用相应的私钥进行解密。 你可以将…

Kubernetes中的secrets存储

华子目录 2.secrets2.1secrets功能介绍2.2secrets的创建2.2.1从文件创建2.2.2编写yaml文件 2.3secret的使用案例2.3.1将secret挂载到volume中2.3.2设置子目录映射secret密钥2.3.3将secret设置为环境变量2.3.4存储docker register的认证信息spec.imagePullSecrets[] 2.secrets …

软件设计师笔记-数据结构

数据结构 数据元素的集合及元素间的相互关系和构造方法。 线性表的存储结构 顺序存储链式存储 单链表节点 typedef struct node { int data; struct node *link; }NODE, *LinkList; 双向链表 每个节点有两个指针&#xff0c;分别指出直接前驱和直接后继。 循环链表 尾…

「Mac畅玩鸿蒙与硬件22」鸿蒙UI组件篇12 - Canvas 组件的动态进阶应用

在鸿蒙应用中,Canvas 组件可以实现丰富的动态效果,适合用于动画和实时更新的场景。本篇将介绍如何在 Canvas 中实现动画循环、动态进度条、旋转和缩放动画,以及性能优化策略。 关键词 Canvas 组件动态绘制动画效果动态进度条旋转和缩放性能优化一、使用定时器实现动画循环 …

通俗易懂的理解递归 回溯 DFS

文章目录 递归概念递归例子1&#xff1a;递归打印链表递归例子2&#xff1a;求n数之和 回溯概念回溯例子1&#xff1a;组合问题 DFS概念DFS例子1&#xff1a;不同路径DFS例子2&#xff1a;岛屿数量总结 递归 概念 “方法自己调用自己&#xff0c;每一次调用都会更加接近递归的…

【AD】1-7 AD24软件扩展插件的设置与安装

1.如图所示打开扩展 2.点击齿轮后&#xff0c;确保离线安装位置关联了软件安装包的路径位置后&#xff0c;进行勾选选择后&#xff0c;点击应用即可安装。 注意&#xff1a;如果位置关联错误&#xff0c;则显示如图

Window on ARM解锁所有的TTS语音包供python调用

Window on ARM解锁所有的TTS语音包供python调用 可用的语音包查看查看TTS可用的语音包解锁语音包设置升级系统打开注册表导出注册表修改注册表导入新的注册表可用的语音包查看 微软的Windows 10操作系统为设备上安装的每种语言提供了一套语音。但只有部分已安装的语音能在整个…

pandas数据处理高级系列003---什么是交叉表(Cross Tabulation)以及pandas如何生成

做ab测试的时候遇到了一个新的知识点&#xff0c;交叉表以及如何用pandas生成交叉表 交叉表&#xff08;Cross Tabulation&#xff09;&#xff0c;也称为列联表&#xff08;Contingency Table&#xff09;&#xff0c;是一种用于统计分析的表格&#xff0c;用于显示两个或多个…

MySQL数据库之存储过程的创建与应用

存储过程 procedure 一.存储过程 作用&#xff1a;将经常使用的功能写成存储过程&#xff0c;方便后续重复使用。 二.创建存储过程 三.调用存储过程 call在计算机中是调用的意思 案例1&#xff1a;查看MySQL用户数 如上图所示&#xff0c;这是查看MySQL数据库中的user个数…

手搓简易shell

1.打印命令行 &#xff0c;接受命令行输入 命令行就是&#xff0c;“[用户名主机名 当前目录]$"获取这些信息都存储在Linux内核中的环境变量中&#xff0c;用getenv()函数取出 #include <stdio.h>2 #include <stdlib.h>3 #include <string.h>4 #include…

多个JDK版本之间的切换

首先电脑上可以同时安装多个版本的 JDK&#xff08;Java Development Kit),因为不同的应用程序可能需要不同 Java 版本的支持,安装多个 JDK 版本并不会导致冲突&#xff0c;只要设置好即可,在不同的情况下切换不同的jdk版本保证程序正常工作 很多程序jdk8 已经不支持,所以下载…

鸿蒙生态下开发挑战-鸿蒙低代码开发工具展望及优势

鸿蒙生态下开发挑战 在鸿蒙生态下开发时&#xff0c;开发者可能会遇到多方面的挑战&#xff0c;这些挑战主要涉及开发工具、技术难度、生态竞争以及市场定位等方面。以下是对这些挑战的详细分析&#xff1a; 一、开发工具不完善 尽管鸿蒙系统的开发工具DevEco Studio在逐步完…

celery在django项目中实现并发任务和定时任务

创建一个django项目 django-admin startproject celeryDemo进入项目目录 cd celeryDemo在你的 Django 项目中&#xff0c;创建一个 celery_.py 文件&#xff0c;通常放在项目的根目录&#xff08;与 settings.py 同级&#xff09;&#xff1a; from __future__ import absol…

ST算法解RMQ问题

题目 代码 #include <bits/stdc.h> using namespace std; const int N 2e510, M 20; int st[N][M]; int n, m; int main() {ios::sync_with_stdio(0);cin.tie(0);cin >> n;for(int i 1; i < n; i)cin >> st[i][0];for(int i 1; (1 << i) < …

国内版Sketchfab平台 - CG美术之家(3D编辑发布篇)

CG美术之家为您提供了一个简便的模型上传流程&#xff0c;让发布您的3D模型变得轻而易举。只需准备好通用的3D模型格式&#xff0c;如OBJ、FBX或STL&#xff0c;您就可以轻松上传并分享您的创作。我们的平台支持在线3D渲染&#xff0c;您只需花费不到一分钟的时间&#xff0c;就…

Rocky Linux 9安装后无法远程ssh密码登录解决

在Rocky Linux 9版本中&#xff0c;为了增加安全性&#xff0c;默认情况下禁用SSH root密码登录。这是系统默认设定的规则&#xff0c;我们同样也可以更改它。   允许Rocky Linux 9 root用户通过ssh登录方法&#xff1a; 1.编辑SSH配置文件 2.找到以下内容 PermitRootLogin …

C语言教程——操作符详解(1)

目录 前言 1.操作符的分类&#xff1a; 2.算数操作符 2.1除法 2.2取模 3.移位操作符 3.1二进制相关知识 3.2左移操作符 3.2.1正数 3.2.2负数 3.2.3结论 3.3右移操作符 4.位操作符 4.1 按位与 4.2按位或 4.3按位异或 ​编辑 5.赋值操作符 6.复合赋值符 7.单目操…

mfc140u.dll丢失怎么办? mfc140u.dll文件缺失的修复技巧

mfc140u.dll 是 Microsoft Foundation Classes (MFC) 库的一部分&#xff0c;它是 Visual Studio 2015 的组件之一&#xff0c;主要服务于使用 C 编写的 Windows 应用程序。这个动态链接库文件包含了 MFC 14.0 Unicode 版本的实现代码&#xff0c;为应用程序提供运行时支持。当…