06 使用v-model实现双向数据绑定

概述

Vue achieves two-way data binding by creating a dedicated directive that watches a data property within your Vue component. The v-model directive triggers data updates when the target data property is modified on the UI.

Vue 通过创建一个专用指令来观察 Vue 组件中的数据属性,从而实现双向数据绑定。当用户界面上的目标数据属性被修改时,v-model 指令就会触发数据更新。

This directive is usually useful for HTML form elements that need to both display the data and modify it reactively – for example, input, textarea, radio buttons, and so on.

该指令通常适用于既需要显示数据又需要对数据进行反应式修改的 HTML 表单元素,例如输入、文本区域、单选按钮等。

We can enable two-way binding by adding the v-model directive to the target element and binding it to our desired data props:

我们可以在目标元素中添加 v-model 指令,并将其绑定到所需的数据道具,从而启用双向绑定:

<template><input v-model="name"/>
</template>
<script>
export default {data() {return {name: ''}}
}
</script>

In the next exercise, we are going to build a component using Vue’s twoway data binding and experiment with what it means to bind data in two ways.

在下一个练习中,我们将使用 Vue 的双向数据绑定构建一个组件,并尝试以两种方式绑定数据的含义。

练习:双向数据绑定

The context for this type of data model is usually forms or wherever you expect both input and output data. By the end of the exercise, we should be able to utilize the v-model attribute in the context of a form.

这类数据模型的上下文通常是表单或任何需要输入和输出数据的地方。在练习结束时,我们应该能够在表单中使用 v-model 属性。

Create a new Vue component file named Exercise1-04.vue in the src/components directory.

在 src/components 目录中新建一个名为 Exercise1-04.vue 的 Vue 组件文件。

在App.vue中引入该组件并渲染:

<script setup>
import Exercise from "./components/Exercise1-04.vue";
</script>
<template><Exercise/>
</template>

Inside Exercise1-04.vue, start by composing an HTML label and bind an input element to the name data prop using v-model inside the template area:

在 Exercise1-04.vue 中,首先创建一个 HTML 标签,然后在模板区域内使用 v-model 将输入元素与名称数据道具绑定:

<div class="form">
<label>Name<input type="text" v-model="name"/>
</label>
</div>

Complete the binding of the text input by returning a reactive data prop called name in the <script> tag:

<script> 标记中返回名为 name 的反应式数据道具,从而完成文本输入的绑定:

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

Next, compose a label and selectable HTML select tied to the language data prop using v-model inside of the template area:

接下来,在模板区域内使用 v 模型编写与语言数据道具绑定的标签和可选 HTML 选项:

<template><div class="form"><label>Name<input type="text" v-model="name"/></label><label>Preferred JavaScript style<select name="language" v-model="language"><option value="Javascript">JavaScript</option><option value="TypeScript">TypeScript</option><option value="CoffeeScript">CoffeeScript</option><option value="Dart">Dart</option></select></label></div>
</template>

Finish binding the select input by returning a reactive data prop called language in the <script> tag:

<script> 标记中返回名为 language 的反应式数据道具,完成选择输入的绑定:

<script>
export default {data() {return {name: '',language: '',}},
}
</script>

Below the form fields, output the name and language inside of an unordered list structure (<ul> and <li>) by using curly braces such as {{ name }}. Your code should look as follows:

在表单字段下方,使用大括号(如 {{ name }})在无序列表结构(<ul><li>)中输出名称和语言。您的代码应如下所示:

<template><section><div class="form"><label>Name<input type="text" v-model="name"/></label><label>Preferred JavaScript style<select name="language" v-model="language"><option value="JavaScript">JavaScript</option><option value="TypeScript">TypeScript</option><option value="CoffeeScript">CoffeeScript</option><option value="Dart">Dart</option></select></label></div><ul class="overview"><li><strong>Overview</strong></li><li>Name: {{ name }}</li><li>Preference: {{ language }}</li></ul></section>
</template>

Add styling inside the <style> tag at the bottom of the component:

在组件底部的"<style>"标签内添加样式:

<style>
.form {display: flex;justify-content: space-evenly;max-width: 800px;padding: 40px 20px;border-radius: 10px;margin: 0 auto;background: #ececec;
}.overview {display: flex;flex-direction: column;justify-content: space-evenly;max-width: 300px;margin: 40px auto;padding: 40px 20px;border-radius: 10px;border: 1px solid #ececec;
}.overview > li {list-style: none;
}.overview > li + li {margin-top: 20px;
}
</style>

When you update the data in the form, it should also update the overview area synchronously.

更新表单中的数据时,也应同步更新概览区域。

最终完整代码如下:

<template><section><div class="form"><label>Name<input type="text" v-model="name"/></label><label>Preferred JavaScript style<select name="language" v-model="language"><option value="JavaScript">JavaScript</option><option value="TypeScript">TypeScript</option><option value="CoffeeScript">CoffeeScript</option><option value="Dart">Dart</option></select></label></div><ul class="overview"><li><strong>Overview</strong></li><li>Name: {{ name }}</li><li>Preference: {{ language }}</li></ul></section>
</template>
<script>
export default {data() {return {name: '',language: '',}},
}
</script>
<style>
.form {display: flex;justify-content: space-evenly;max-width: 800px;padding: 40px 20px;border-radius: 10px;margin: 0 auto;background: #ececec;
}.overview {display: flex;flex-direction: column;justify-content: space-evenly;max-width: 300px;margin: 40px auto;padding: 40px 20px;border-radius: 10px;border: 1px solid #ececec;
}.overview > li {list-style: none;
}.overview > li + li {margin-top: 20px;
}
</style>

In this exercise, we used the v-model directive to bind the name and JavaScript-style drop-down selection to our local state’s data. When you modify the data, it will reactively update the DOM elements to which we output its value.

在本练习中,我们使用 v-model 指令将名称和 JavaScript 样式的下拉选择绑定到本地状态数据。当您修改数据时,它将反应式地更新我们输出其值的 DOM 元素。

Next, we will discuss our v-for directive further and different approaches to handling iterative data collection in Vue.

接下来,我们将进一步讨论 v-for 指令以及在 Vue 中处理迭代数据收集的不同方法。

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

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

相关文章

IntelliJ IDEA 自带HTTP Client接口插件上传文件示例

如何使用IntelliJ IDEA自带的HTTP Client接口插件进行文件上传的示例。在这个示例中&#xff0c;我们将关注Controller代码、HTTP请求文件&#xff08;xxx.http&#xff09;&#xff0c;以及文件的上传和处理。 Controller代码 首先&#xff0c;让我们看一下处理文件上传的Co…

第15章 《乐趣》Page305~311, 代码精简以后,讨论一下引用含义的问题

将Page305~311的代码精简了一下&#xff0c;讨论一下引用含义的问题&#xff0c;精简之后的代码如下&#xff1a; #include <iostream> #include <SDL2/SDL.h>using namespace std;namespace sdl2 {char const* last_error() {return SDL_GetError(); }struct Ini…

基于 WebSocket 打造聊天室

一、什么是 WebSocket&#xff1f; WebSocket 是一种基于TCP连接上进行 全双工 通信的协议。WebSocket使得客户端和服务器之间的数据交换变得更加简单&#xff0c;允许服务端主动向客户端推送数据。在WebSocket API中&#xff0c;浏览器和服务器只需要完成一次握手&#xff0c…

第三十六章 XML 模式的高级选项 - 创建子类型的替换组

文章目录 第三十六章 XML 模式的高级选项 - 创建子类型的替换组创建子类型的替换组将子类限制在替换组中 第三十六章 XML 模式的高级选项 - 创建子类型的替换组 创建子类型的替换组 XML 模式规范还允许定义替换组&#xff0c;这可以是创建选择的替代方法。语法有些不同。无需…

Windows 10如何关闭系统自动更新(实用教程)

本章教程&#xff0c;用最简洁的方式介绍在windows10中如何关闭系统自动更新。 目录 一、关闭自动更新服务 二、关闭自动更新组策略 一、关闭自动更新服务 1、 winr 2、services.msc 3、找到并双击 Windows Update 修改启动类型为禁用 二、关闭自动更新组策略 1、winr 2、gp…

2.4【渲染】Vulkan渲染APIs

写在前面 Screen支持Khronos的Vulkan渲染API。Vulkan是一款用于3D图形和计算的低开销、跨平台、开放行业标准API。它使开发人员能够使用相同的图形API来面向各种设备。 Vulkan标准由Khronos Group发布。 通常,硬件供应商都有自己的Khronos标准实现,利用硬件加速,特别是GP…

Next.js 学习笔记(一)——安装

安装 系统要求&#xff1a; Node.js 18.17 或更高版本支持 macOS、Windows&#xff08;包括 WSL&#xff09;和 Linux 自动安装 我们建议使用 create-next-app 启动一个新的 Next.js 应用程序&#xff0c;该应用程序会自动为你设置所有内容。要创建项目&#xff0c;请运行&…

3. 内容模块管理 - 异常处理与校验

文章目录 内容模块管理一、自定义异常1.1 全局异常处理器1.2 自定义异常1.3 异常统一响应类1.4 封装通用异常信息 二、JSR303校验2.1 Maven坐标2.2 校验规则2.3 代码示例2.4 捕捉校验异常2.5 分组校验2.6 备注 三、全局异常处理23.1 全局异常处理器3.2 结果集3.3 常用注解3.3.1…

【漏洞复现】捷诚管理信息系统 SQL注入漏洞

漏洞描述 捷诚管理信息系统是一款功能全面,可以支持自营、联营到外柜租赁的管理,其自身带工作流管理工具,能够帮助企业有效的开展内部审批工作。 该系统CWSFinanceCommon.asmx接口存在SQL注入漏洞。未经身份认证的攻击者可以通过该漏洞获取数据库敏感信息,深入利用可获取…

Redis设计与实现之整数集合

目录 一、内存映射数据结构 二、整数集合 1、整数集合的应用 2、数据结构和主要操作 3、intset运行实例 创建新intset 添加新元素到 intset 添加新元素到 intset&#xff08;不需要升级&#xff09; 添加新元素到 intset (需要升级) 4、升级 升级实例 5、关于升级 …

GZ015 机器人系统集成应用技术样题4-学生赛

2023年全国职业院校技能大赛 高职组“机器人系统集成应用技术”赛项 竞赛任务书&#xff08;学生赛&#xff09; 样题4 选手须知&#xff1a; 本任务书共 25页&#xff0c;如出现任务书缺页、字迹不清等问题&#xff0c;请及时向裁判示意&#xff0c;并进行任务书的更换。参赛队…

Flutter在Android Studio上创建项目与构建模式

一、安装插件 1、前提条件&#xff0c;安装配置好Android Studio环境 2、安装Flutter和Dart插件 Linux或者Windows平台&#xff1a; 1&#xff09;、打开File > Settings。 2&#xff09;、在左侧列表中&#xff0c;选择"Plugins"右侧上方面板选中 "Market…

vue-element-admin如何把mock换成使用真实后台接口

1&#xff09;修改vue.config.js文件 use strict const path require(path) const defaultSettings require(./src/settings.js)function resolve(dir) {return path.join(__dirname, dir) }const name defaultSettings.title || vue Element Admin // page title// If you…

Vue3-16-【v-model】 表单数据绑定

作用描述 v-model 指令&#xff0c;实现了 表单输入组件的值 与 js 中的变量的值的绑定关系。 当我们在页面上执行输入动作时&#xff0c;js中变量的值也会同步发生变化。表单不仅仅局限于输入框&#xff0c;其他的如 &#xff1a; 单选按钮&#xff0c;复选框&#xff0c;下拉…

数据结构面试题和题目解析

以下是一些数据结构的面试题和解析&#xff1a; 1. 什么是链表&#xff1f; 链表是一种线性数据结构&#xff0c;由一系列节点组成&#xff0c;每个节点包含数据部分和指向下一个节点的指针。链表的主要优点是插入和删除操作比较方便&#xff0c;但访问链表中的元素不如访问数组…

【INTEL(ALTERA)】 quartus SignalTap 逻辑分析器 – Nios® II 插件 无法检测 Nios® II/f 处理器内核

说明 使用 Nios II 插件将 Nios II/f 处理器内核节点添加到 SignalTap 逻辑分析器时&#xff0c;在 英特尔 Quartus Prime Pro Edition 软件 23.3 版中可能会出现此问题。 错误消息&#xff1a; 无法完成“添加带插件的节点”命令&#xff0c;因为在当前设计中找不到所选 IP。…

php遍历⽂件的几种方法

在PHP中&#xff0c;有五种主要的方法可以遍历文件和目录。以下是这些方法的详细说明&#xff1a; 使用foreach遍历目录 你可以使用foreach循环遍历目录中的所有文件。 $dir directory_path; if (is_dir($dir)) { $files scandir($dir); foreach ($files …

IDEA之设置项目包的结构层级为eclipse默认样式

idea默认项目包的结构层级如下: 想修改成eclipse默认的那种样式&#xff0c;设置步骤如下: 1.点击下图中红框图标进行设置 2.选择 Tree Appearance&#xff0c;取消勾选 Compact Middle Packages 3.勾选红框里的两个选项&#xff0c;Flatten Packages 和 Hide Empty Middle Pa…

专业进阶:Python 中 Scipy 的稀疏矩阵与高级插值

写在开头 在前几篇文章中&#xff0c;我们已经深入了解了Scipy库的基础功能和在数值计算、优化、信号处理等领域的应用。本文将进一步探讨Scipy库中的高级功能&#xff0c;专注于稀疏矩阵处理和高级插值技术。这些功能在实际数据分析中具有广泛的应用&#xff0c;能够处理大规…

DL Homework 11

由于好多同学问我要代码&#xff0c;但这两天光顾着考四六级了&#xff0c;所以只能今天熬夜先给赶出来&#xff0c;第一题先搁置&#xff0c;晚点补上&#xff0c;先写第二题 习题6-4 推导LSTM网络中参数的梯度&#xff0c; 并分析其避免梯度消失的效果 习题6-3P 编程实现…