v-model原理

v-model原理

    • v-model原理
    • 表单类组件封装
    • v-model简化代码

v-model原理

1.原理:

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

<template><div id="app" ><input v-model="msg" type="text"><input :value="msg" @input="msg = $event.target.value" type="text"></div>
</template>

2.作用:

提供数据的双向绑定

  • 数据变,视图跟着变 :value
  • 视图变,数据跟着变 @input

3.注意

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

4.代码示例

<template><div class="app"><input type="text"  /><br /> <input type="text" /></div>
</template><script>
export default {data() {return {msg1: '',msg2: '',}},
}
</script> 
<style>
</style>

5.v-model使用在其他表单元素上的原理

不同的表单元素, v-model在底层的处理机制是不一样的。比如给checkbox使用v-model

底层处理的是 checked 属性和 change 事件。

不过咱们只需要掌握应用在文本框上的原理即可

表单类组件封装

1.需求目标

实现子组件和父组件数据的双向绑定 (实现App.vue中的selectId和子组件选中的数据进行双向绑定)

2.代码演示

App.vue

<template><div class="app"><BaseSelect></BaseSelect></div>
</template><script>
import BaseSelect from './components/BaseSelect.vue'
export default {data() {return {selectId: '102',}},components: {BaseSelect,},
}
</script><style>
</style>

BaseSelect.vue

<template><div><select><option value="101">北京</option><option value="102">上海</option><option value="103">武汉</option><option value="104">广州</option><option value="105">深圳</option></select></div>
</template><script>
export default {
}
</script><style>
</style>

v-model简化代码

1.目标:

父组件通过v-model 简化代码,实现子组件和父组件数据 双向绑定

2.如何简化:

v-model其实就是 :value和@input事件的简写

  • 子组件:props通过value接收数据,事件触发 input
  • 父组件:v-model直接绑定数据

3.代码示例

子组件

<select :value="value" @change="handleChange">...</select>
props: {value: String
},
methods: {handleChange (e) {this.$emit('input', e.target.value)}
}

父组件

<BaseSelect v-model="selectId"></BaseSelect>

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

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

相关文章

Linux 基础概念

Linux 基础概念 ‍ 在最初学习Linux之前&#xff0c;首先需要搞清楚一些概念。熟悉这些概念之后紧接着熟悉各种命令&#xff0c;这有助于Linux命令的学习。这些概念绝对是你必须知道的&#xff0c;而且有些概念并不显而易见。但是当理解它们以后&#xff0c;你的shell命令也将…

Java 学习和实践笔记(8)

视频解释说&#xff0c;上图不用我们常规的写法&#xff0c;仅仅只是为了在同样的情况下&#xff0c;少写一个a而已&#xff01;这我目前不能理解。毕竟后面这种对初学者来说&#xff0c;看起来更一目了解。

DS Wannabe之5-AM Project: DS 30day int prep day14

Q1. What is Alexnet? Q2. What is VGGNet? Q3. What is VGG16? Q4. What is ResNet? At the ILSVRC 2015, so-called Residual Neural Network (ResNet) by the Kaiming He et al introduced the anovel architecture with “skip connections” and features heavy b…

爬爬爬——今天是浏览器窗口切换和给所选人打钩(自动化)

学习爬虫路还很长&#xff0c;第一阶段花了好多天了&#xff0c;还在底层&#xff0c;虽然不是我专业要学习的语言&#xff0c;和必备的知识&#xff0c;但是我感觉还挺有意思的。加油&#xff0c;这两天把建模和ai也不学了&#xff0c;唉过年了懒了&#xff01; 加油坚持就是…

【INTEL(ALTERA)】为什么 Nios V/m EMIF 数据移动器设计示例的 JTAG 终端中的内存测试失败?

说明 由于英特尔 Quartus Prime 专业版软件 22.3 版存在一个问题&#xff0c;当为Intel Agilex 7 - Nios V/m EMIF 数据移动器设计示例&#xff08;预安装设计&#xff0c;随英特尔 Quartus Prime 专业版软件一起提供&#xff09;的内存位置时&#xff0c;您可能会在 JTAG 终端…

LeetCode、1318. 或运算的最小翻转次数【中等,位运算】

文章目录 前言LeetCode、1318. 或运算的最小翻转次数【中等&#xff0c;位运算】题目链接与分类题解位运算 资料获取 前言 博主介绍&#xff1a;✌目前全网粉丝2W&#xff0c;csdn博客专家、Java领域优质创作者&#xff0c;博客之星、阿里云平台优质作者、专注于Java后端技术领…

Linux:信号的处理

文章目录 信号处理 本篇总结的是关于信号的处理 信号处理 在之前有这样的观点&#xff1a;信号在合适的时候被处理好&#xff0c;当进程收到信号后&#xff0c;当前进程可能在做优先级更高的事&#xff0c;所以它来不及处理这个信号&#xff0c;那么就会把这个信号暂时保存起…

从零开始:Linux下的Miniconda安装教程

&#x1f680;从零开始&#xff1a;Linux下的Miniconda安装教程&#x1f680; &#x1f335;文章目录&#x1f335; &#x1f333;引言&#x1f333;&#x1f333;二、Miniconda简介&#xff1a;开启您的数据科学之旅的得力助手&#xff01; &#x1f333;&#x1f333;三、Lin…

Linux_文件系统

假定外部存储设备为磁盘&#xff0c;文件如果没有被使用&#xff0c;那么它静静躺在磁盘上&#xff0c;如果它被使用&#xff0c;则文件将被加载进内存中。故此&#xff0c;可以将文件分为内存文件和磁盘文件。 内存文件 磁盘文件 软、硬链接 一.内存文件 1.1 c语言的文件接口 …

实验5-1 使用函数计算两个复数之积

若两个复数分别为&#xff1a;c1​x1​y1​i和c2​x2​y2​i&#xff0c;则它们的乘积为 c1​c2​(x1​x2​−y1​y2​)(x1​y2​x2​y1​)i。 本题要求实现一个函数计算两个复数之积。 函数接口定义&#xff1a; double result_real, result_imag; void complex_prod( doub…

OpenMVG(EXIF、畸变、仿射特征、特征匹配)

本人之前也研究过OpenMVS但是对于OpenMVG只是原理层次的了解&#xff0c;因此乘着过年期间对这个库进行详细的学习。 目录 1 OpenMVG编译与简单测试 1.1 sfm_data.json获取 1.2 计算特征 2 OpenMVG整个流程的运行测试 3 OpenMVG实战 3.1 SVG绘制 3.2 解析图片的EXIF信息…

Decian 12.x基于LNMP安装phpIPAM(IP管理系统)

phpipam是一个开源Web IP地址管理应用程序&#xff08;IPAM&#xff09;。其目标是提供轻便&#xff0c;且有用的IP地址管理系统。它是基于PHP的应用程序&#xff0c;具有MySQL数据库后端&#xff0c;使用jQuery库&#xff0c;ajax和HTML5 / CSS3功能。 在Debian 12中&…

小马识途营销顾问分析营销故事五则

有两个做市场的小伙伴争论起来了&#xff0c;甲认为只有产品好才能在市场上胜出&#xff0c;乙认为只有营销搞好就能在市场上胜出。这两个观点小马识途营销顾问认为都有道理&#xff0c;但好的营销可以让好的产品尽快占领市场&#xff0c;好的产品可以让营销效果事半功倍。其实…

MogaNet实战:使用 MogaNet实现图像分类任务(二)

文章目录 训练部分导入项目使用的库设置随机因子设置全局参数图像预处理与增强读取数据设置Loss设置模型设置优化器和学习率调整策略设置混合精度&#xff0c;DP多卡&#xff0c;EMA定义训练和验证函数训练函数验证函数调用训练和验证方法 运行以及结果查看测试完整的代码 在上…

Python weather app tutorial

import datetime as dt import requests """ 处理HTTP请求是在Web开发和许多网络应用中常见的任务 尤其是当需要与外部服务或API进行交互时。 python通过多个库提供了处理HTTP请求的功能 最著名且友好的是‘requests’库&#xff0c;以下是‘requests’库处理HT…

小游戏和GUI编程(7) | SimpleNN 界面源码解析

小游戏和GUI编程(7) | SimpleNN 界面源码解析 0. 简介 SimpleNN 是 AdamYuan 在高中一年级时用 1 天时间写出来的简易 CNN, 使用 SFML 做 UI, 用于交互式输入手写数字&#xff0c;这个数字被训练好的 CNN 网络执行推理得到识别结果, 它的运行效果如下&#xff1a; 这一篇我们…

Leetcode 1143 最长公共子序列

题意理解&#xff1a; 给定两个字符串 text1 和 text2&#xff0c;返回这两个字符串的最长 公共子序列 的长度。如果不存在 公共子序列 &#xff0c;返回 0 。 一个字符串的 子序列 是指这样一个新的字符串&#xff1a;它是由原字符串在不改变字符的相对顺序的情况下删除某些字…

专业140+总分420+浙江大学842信号系统与数字电路考研经验电子信息与通信,真题,大纲,参考书。

今年考研已经结束&#xff0c;初试专业课842信号系统与数字电路140&#xff0c;总分420&#xff0c;很幸运实现了自己的目标&#xff0c;被浙大录取&#xff0c;这在高考是想都不敢想的学校&#xff0c;在考研时实现了&#xff0c;所以大家也要有信心&#xff0c;通过自己努力实…

【FPGA】VHDL:八段码到8421BCD码转换电路

目录 EDA设计基础练习题 &#xff1a; 实验要求如下&#xff1a; 代码 八段码到8421BCD码转换电路 8421BCD码到八段码转换电路 八段码到8421BCD~运行结果展示 8421BCD转八段码~运行结果展示 特别注意 软件&#xff1a;Quartus II 13.0 (64-bit) 语言&#xff1a;VHDL E…

勒索病毒最新变种.target勒索病毒来袭,如何恢复受感染的数据?

导言&#xff1a; 在当今数字化时代&#xff0c;数据被视为企业和个人最重要的资产之一。然而&#xff0c;随着技术的进步&#xff0c;网络安全威胁也在不断演变。其中&#xff0c;勒索病毒是一种极具破坏性的威胁&#xff0c;而".target"勒索病毒是近期备受关注的一…