【Vue】深入理解 `v-model` 指令:实现数据双向绑定的终极指南

news2024/11/14 11:58:52

文章目录

    • 一、`v-model` 指令概述
    • 二、`v-model` 的基本用法
      • 1. 绑定输入框的值
      • 2. 绑定多行文本框的值
      • 3. 绑定复选框
      • 4. 绑定单选框
      • 5. 绑定选择框
    • 三、`v-model` 的工作原理
    • 四、`v-model` 的高级用法
      • 1. 自定义组件中的 `v-model`
        • 模板部分 (`<template>`)
        • 脚本部分 (`<script>`)
      • 2. 多重 `v-model`
    • 五、`v-model` 的注意事项

在 Vue.js 中,v-model 指令是实现数据双向绑定的核心工具。它使得视图与数据之间的同步变得简单高效。本文将详细介绍 v-model 的基本用法、常见场景、工作原理以及高级用法,帮助你全面掌握这一重要指令。

一、v-model 指令概述

v-model 是 Vue.js 中用于实现双向数据绑定的指令。通过 v-model,可以将表单元素的值与 Vue 实例的数据进行绑定,使得视图与数据保持同步。使用 v-model 指令时,Vue 会自动处理输入框的值与数据模型之间的同步更新,简化了表单处理的复杂度。

基本语法

v-model 的基本语法如下:

<input v-model="message" />

在这个示例中,v-model 绑定了 message 数据属性。当用户在输入框中输入内容时,message 数据属性的值会自动更新;反之,当 message 数据属性的值发生变化时,输入框中的内容也会同步更新。

二、v-model 的基本用法

1. 绑定输入框的值

最常见的 v-model 用法是绑定文本输入框的值。例如:

<template>
  <div>
    <input v-model="username" placeholder="请输入用户名">
    <p>用户名:{{ username }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: ''
    }
  }
}
</script>

在这个例子中,输入框的值和 username 数据属性之间存在双向绑定。输入框中的内容变化会更新 username,而 username 的变化也会反映在输入框中。

2. 绑定多行文本框的值

对于多行文本框(<textarea>),v-model 的用法与单行输入框类似:

<template>
  <div>
    <textarea v-model="message" placeholder="请输入留言"></textarea>
    <p>留言内容:{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  }
}
</script>

3. 绑定复选框

对于复选框,v-model 可以与布尔值绑定:

<template>
  <div>
    <input type="checkbox" v-model="checked">
    <p>是否选中:{{ checked }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checked: false
    }
  }
}
</script>

当复选框被选中时,checked 的值会变为 true,否则为 false

4. 绑定单选框

对于单选框(<input type="radio">),v-model 绑定到一个数据属性,这个属性的值将是被选中的单选框的 value 值。例如:

<template>
  <div>
    <label>
      <input type="radio" value="option1" v-model="picked"> 选项 1
    </label>
    <label>
      <input type="radio" value="option2" v-model="picked"> 选项 2
    </label>
    <p>选中的选项:{{ picked }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      picked: ''
    }
  }
}
</script>

5. 绑定选择框

v-model 也可以与 <select> 元素绑定:

<template>
  <div>
    <select v-model="selected">
      <option disabled value="">请选择一个选项</option>
      <option value="option1">选项 1</option>
      <option value="option2">选项 2</option>
    </select>
    <p>选择的值:{{ selected }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: ''
    }
  }
}
</script>

三、v-model 的工作原理

v-model 实现双向绑定的核心原理包括以下几个方面:

  1. 数据绑定v-model 将视图中的表单控件的值绑定到 Vue 实例的数据属性。
  2. 事件监听v-model 监听用户对表单控件的输入事件(例如 input 事件),并在用户输入时自动更新数据属性的值。
  3. 更新视图:当数据属性的值发生变化时,v-model 自动更新表单控件的值,确保视图和数据的同步。

四、v-model 的高级用法

1. 自定义组件中的 v-model

在自定义组件中使用 v-model 时,可以通过 model 选项定义组件的 v-model 绑定属性。例如:

<template>
  <div>
    <input :value="value" @input="$emit('input', $event.target.value)">
  </div>
</template>

<script>
export default {
  props: {
    value: String
  }
}
</script>

在这个示例中,自定义组件将 value 作为 v-model 绑定的属性,并通过 $emit('input', ...) 触发 input 事件,将输入的值传递给父组件。

模板部分 (<template>)
<template>
  <div>
    <input :value="value" @input="$emit('input', $event.target.value)">
  </div>
</template>
  • <input :value="value":这是一个标准的 HTML 输入框元素。通过 :value="value"(即 v-bind:value="value"),将组件的 value 属性绑定到输入框的值。这样,输入框的显示值将根据 value 数据属性的变化而更新。
  • @input="$emit('input', $event.target.value)":这是一个事件监听器,用于处理输入框的 input 事件。当用户在输入框中输入内容时,触发 input 事件。$emit('input', $event.target.value)input 事件向父组件发射,并传递输入框的当前值 $event.target.value 作为参数。这是实现 v-model 双向绑定的关键。
脚本部分 (<script>)
<script>
export default {
  props: {
    value: String
  }
}
</script>
  • props: { value: String }:在自定义组件中定义了一个 value 属性,这个属性用于接收父组件传递的数据。valuev-model 默认的绑定属性名称,类型为 String

2. 多重 v-model

Vue 3 支持在同一组件上使用多个 v-model。可以通过 model 选项定义不同的绑定属性名。例如:

<template>
  <div>
    <input v-model:title="title" v-model:content="content">
  </div>
</template>

<script>
export default {
  props: {
    title: String,
    content: String
  },
  emits: ['update:title', 'update:content']
}
</script>

在这个示例中,v-model:titlev-model:content 分别绑定到 titlecontent 数据属性。

五、v-model 的注意事项

  1. 控制与非控制组件

v-model 只能用于控制组件,不能用于非控制组件。控制组件具有受控的 value 属性和 input 事件。

  1. 避免双重绑定

确保在同一个表单控件上只使用一个 v-model 绑定,避免出现双重绑定的情况。

  1. 自定义事件命名

自定义组件中的 v-model 使用 input 事件作为默认事件,但可以通过 model 选项自定义事件名称,以适应不同的需求。


在这里插入图片描述

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

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

相关文章

vue项目源码调试方法 ,chrome调试控制台工作区使用,利用chrome控制台调试vue项目源码的方法 图解

我们在开发vue项目的时候&#xff0c;项目开始后的第一件事情应该就是准备调试工作了&#xff0c;Chrome调试控制台就给我们提供了这样的一个方便的调试工作区。方法为&#xff0c;在Chrome浏览器里面打开你要调试的页面&#xff0c;然后打开调试控制台&#xff0c;如下&#x…

基于STC8H4K64TL单片机的触摸功能和数码管驱动功能实现一个触摸按键单击长按都增加数值另一个触摸按键单击长按都减少数值应用

基于STC8H4K64TL单片机的触摸功能和数码管驱动功能实现一个触摸按键单击长按都增加数值另一个触摸按键单击长按都减少数值应用 STC8H4K64TL单片机介绍STC8H4K64TL单片机管脚图(48个引脚)STC8H4K64TL单片机串口仿真与串口通信STC8H4K64TL单片机管脚图(32个引脚)STC8H4K64TL单…

【Linux】汇总TCP网络连接状态命令

输入命令&#xff1a; netstat -na | awk /^tcp/ {S[$NF]} END {for(a in S) print a, S[a]} 显示&#xff1a; 让我们逐步解析这个命令&#xff1a; netstat -na: netstat 是一个用于显示网络连接、路由表、接口统计等信息的命令。 -n 选项表示输出地址和端口以数字格式显示…

ACCL+: an FPGA-Based Collective Engine for Distributed Applications——论文泛读

OSDI 2024 Paper 论文阅读笔记整理 问题 FPGA在云部署中越来越普遍[16,81]&#xff0c;如智能NIC[29,35,64,67103]、流处理器[31,32,55,68]和分布式加速器[15,41,61,65,86,93115]。可以使用FPGA到FPGA的直接通信来构建高效的分布式系统。然而&#xff0c;使用FPGA设计分布式应…

通过 EMR Serverless Spark 提交 PySpark 流任务

在大数据快速发展的时代&#xff0c;流式处理技术对于实时数据分析至关重要。EMR Serverless Spark提供了一个强大而可扩展的平台&#xff0c;它不仅简化了实时数据处理流程&#xff0c;还免去了服务器管理的烦恼&#xff0c;提升了效率。本文将指导您使用EMR Serverless Spark…

python爬虫获取网易云音乐评论歌词以及歌曲地址

python爬虫获取网易云音乐评论歌词以及歌曲地址 一.寻找数据接口二.对负载分析三.寻找参数加密过程1.首先找到评论的请求包并找到发起程序2.寻找js加密的代码 四.扣取js的加密源码1.加密函数参数分析①.JSON.stringify(i0x)②bse6Y(["流泪", "强"])③bse6Y…

Linux--Socket套接字编程

Socket编程 Socket编程是一种在网络中不同计算机之间实现数据交换的编程方式。它允许程序创建网络连接&#xff0c;并通过这些连接来发送和接收数据。Socket编程是网络编程的基础&#xff0c;广泛应用于客户端-服务器&#xff08;C/S&#xff09;架构中。 要实现双方通信&…

【扩散模型(六)】Stable Diffusion 3 diffusers 源码详解1-推理代码-文本处理部分

系列文章目录 【扩散模型&#xff08;一&#xff09;】中介绍了 Stable Diffusion 可以被理解为重建分支&#xff08;reconstruction branch&#xff09;和条件分支&#xff08;condition branch&#xff09;【扩散模型&#xff08;二&#xff09;】IP-Adapter 从条件分支的视…

基于python的去除图像内部填充

1 代码功能 该代码实现了一个图像处理的功能&#xff0c;具体来说是去除图像内部填充&#xff08;或更准确地说&#xff0c;是提取并显示图像中轮廓的外围区域&#xff0c;而忽略内部填充&#xff09;。以下是该功能的详细步骤&#xff1a; 读取图像&#xff1a;使用cv2.imread…

Hadoop-38 Redis 高并发下的分布式缓存 Redis简介 缓存场景 读写模式 旁路模式 穿透模式 缓存模式 基本概念等

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; 目前已经更新到了&#xff1a; HadoopHDFSMapReduceHiveFlumeSqoopZookeeperHBaseRedis 章节内容 上一节我们完成了&#xff1a; HBase …

机器学习-18-统计学与机器学习中回归的区别以及统计学基础知识

参考通透!一万字的统计学知识大梳理 参考3万字长文!手把手教你学会用Python实现统计学 参考统计学的回归和机器学习中的回归有什么差别? 1 研究对象 一维:就是当前摆在我们面前的“一组”,“一批数据。这里我们会用到统计学的知识去研究这类对象。 二维:就是研究某个“事…

【系统架构设计】数据库系统(三)

数据库系统&#xff08;三&#xff09; 数据库模式与范式数据库设计备份与恢复分布式数据库系统分布式数据库的概念特点分类目标 分布式数据库的架构分布式数据库系统与并行数据库系统 数据仓库数据挖掘NoSQL大数据 数据库模式与范式 数据库设计 备份与恢复 分布式数据库系统…

生活中生智慧

【 圣人多过 小人无过 】 觉得自己做得不够才能做得更好&#xff0c;互相成全&#xff1b;反求诸己是致良知的第一步&#xff1b;有苦难才能超越自己&#xff0c;开胸怀和智慧&#xff1b;不浪费任何一次困苦&#xff0c;危机中寻找智慧&#xff0c;成长自己。 把困苦当作当下…

自动驾驶三维车道线检测系列—LATR: 3D Lane Detection from Monocular Images with Transformer

文章目录 1. 概述2. 背景介绍3. 方法3.1 整体结构3.2 车道感知查询生成器3.3 动态3D地面位置嵌入3.4 预测头和损失 4. 实验评测4.1 数据集和评估指标4.2 实验设置4.3 主要结果 5. 讨论和总结 1. 概述 3D 车道线检测是自动驾驶中的一个基础但具有挑战性的任务。最近的进展主要依…

【NetTopologySuite类库】GeometryFixer几何自动修复,解决几何自相交等问题

介绍 NetTopologySuite 2.x 提供了GeometryFixer类&#xff0c;该类能够将几何体修复为有效几何体&#xff0c;同时尽可能保留输入的形状和位置。几何的IsValid属性&#xff0c;反映了几何是否是有效的。 输入的几何图形始终会被处理&#xff0c;因此即使是有效的输入也可能会…

特征工程方法总结

方法有以下这些 首先看数据有没有重复值、缺失值情况 离散&#xff1a;独热 连续变量&#xff1a;离散化&#xff08;也成为分箱&#xff09; 作用&#xff1a;1.消除异常值影响 2.引入非线性因素&#xff0c;提升模型表现能力 3.缺点是会损失一些信息 怎么分&#xff1a;…

pdf太大了怎么变小 pdf太大了如何变小一点

在数字化时代&#xff0c;pdf文件已成为工作与学习的重要工具。然而&#xff0c;有时我们可能会遇到pdf文件过大的问题&#xff0c;这会导致传输困难或者存储不便。别担心&#xff0c;下面我将为你介绍一些实用的技巧和工具&#xff0c;帮助你轻松减小pdf文件的大小。 方法一、…

docker的学习(一):docker的基本概念和命令

简介 docker的学习&#xff0c;基本概念&#xff0c;以及镜像命令和容器命令的使用 docker docker的基本概念 一次镜像&#xff0c;处处运行。 在部署程序的过程中&#xff0c;往往是很繁琐的&#xff0c;要保证运行的环境&#xff0c;软件的版本&#xff0c;配置文件&…

SQLite数据库在Android中的使用

目录 一&#xff0c;SQLite简介 二&#xff0c;SQLIte在Android中的使用 1&#xff0c;打开或者创建数据库 2&#xff0c;创建表 3&#xff0c;插入数据 4&#xff0c;删除数据 5&#xff0c;修改数据 6&#xff0c;查询数据 三&#xff0c;SQLiteOpenHelper类 四&…

信弘智能与图为科技共探科技合作新蓝图

本期导读 近日&#xff0c;图为信息科技&#xff08;深圳&#xff09;有限公司迎来上海信弘智能科技有限公司代表的到访&#xff0c;双方共同探讨英伟达生态系统在人工智能领域的发展。 在科技日新月异的今天&#xff0c;跨界合作与技术交流成为了推动行业发展的重要驱动。7月…