当前位置： 首页 > news >正文

Vue 双向数据绑定

news 2026/1/20 19:03:41

之前通过v-bind来完成的数据绑定，属性值和表达式进行绑定，表达式的值发生变化了属性值也跟着发生变化。

单向数据绑定：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>首页</title><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head><body>  <div id="app">单向数据绑定：<input type="text" v-bind:value="name">           </div><script type="text/javascript"> Vue.config.productionTip = false     new Vue({    el: "#app",   data:{ name: "lucas",}})</script></body>
</html>

 v-bind最大特点就是单向数据绑定，修改了data里面的值容器里面的值也会跟着改变，但是修改容器里面的值data里面的值是不会发生变化的。

还有另外一个指令可以完成双向的绑定。也就是页面中的值发生变化还能够影响到data的值，这就需要使用v-model指令了。

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>首页</title><!--引入vue,这里引入vue那么这里就多了vue构造函数--><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head><body>  <div id="app">单向数据绑定：<input type="text" v-bind:value="name"><br>双向数据绑定：<input type="text" v-model:value="name"></div><script type="text/javascript"> Vue.config.productionTip = false     new Vue({    el: "#app",   data:{ name: "lucas",}})</script></body>
</html>

但是需要注意的是v-modle是不能使用在如h2这种标签上面的。v-model只能应用在表单类元素上（输入类元素，也就是得有value值才行）。

随着输入，删除你的value值是在发生改变的，而h2这种标题类型的是不能够输入的。不能够输入就是没有value值，没有value值就证明不能捕获用户的输入，连输入的值都不能捕获那怎么可能影响数据的变化呢？所以这就是v-model的设计意义和value值绑定。

input 单选框 多选框 select框 多行输入 有很多的表单元素，这些表单元素都有一个特点就是都有value值，因为v-model就是对value进行说话。

     <h1 v-model:x="name"></h1>

Vue中有2种数据绑定的方式：
1.单向绑(v-bind):数据只能从data流向页面（单方向）
2.双向绑定(V-mode1):数据不仅能从data流向页面，还可以从页面流向data（双方向）

备注：
1.双向绑定一般都应用在表单类元素上(如：input、select等)
2.v-model:value可以简写为v-model，因为v-mode1默认收集的就是value值

最后简写如下：

    <div id="app">单向数据绑定：<input type="text" :value="name"><br>双向数据绑定：<input type="text" v-model="name"></div>

相关文章：

Vue 双向数据绑定

之前通过v-bind来完成的数据绑定&#xff0c;属性值和表达式进行绑定&#xff0c;表达式的值发生变化了属性值也跟着发生变化。 单向数据绑定&#xff1a; <!DOCTYPE html> <html> <head><meta charset"UTF-8"><title>首页</titl…...

编程日记 2023/11/28 23:00:34

电脑开机过程中，程序的启动的顺序是怎么样的？

电脑的启动过程涉及多个步骤，程序按照特定的顺序启动。这个过程通常如下： 电源开启: 当你按下电源按钮时，电源供应器（PSU）开始向电脑的各个组件供电。 自检加电（POST）: 这是电脑启动过程的第一步。在这个阶段，基本输入输出系统（BIOS）或统一可扩展固件接口（UEFI）执行…...

编程日记 2023/11/28 22:59:33

JSON详细教程

&#x1f60a;JSON详细教程 &#x1f6a9;JSON简介☃️JSON语法规则&#x1f50a;JSON和JavaScript对象的区别 ☃️JSON数据类型字符串&#x1f50a;数字&#x1f50a;布尔值&#x1f50a;数组&#x1f50a;对象&#x1f50a;Null ☃️JSON对象&#x1f50a;访问JSON对象的值&a…...

编程日记 2023/11/28 22:58:31

DSP介绍及CCS

文章目录 CCS版本编译器CCS使用注意严禁中文 CCS的基本操作新建工程导入现有工程调整字体的大小工程界面恢复标签的使用 仿真盒小虫子进入在线Debug 仿真器芯片TMS320F28355基本介绍特性 DSP中特殊指令dsp指令中的EALLOW EDIS CCS TI官网 版本 CCS版本&#xff1a; CCS8.3.1…...

编程日记 2023/11/28 22:57:30

周期串（Periodic Strings）

做了我两个小时&#xff0c;我真的裂开 之前已经发过一次了&#xff0c;走在回宿舍的路上突然发现有些情况并不适用&#xff0c;赶紧删掉了 题目如下&#xff1a; 如果一个字符串可以由某个长度为k的字符串重复多次得到&#xff0c;则称该串以k为周期。例如&#xff1a;abca…...

编程日记 2023/11/28 22:56:29

C语言——猜凶手

题目&#xff1a; 日本某地发生了一件谋杀案&#xff0c;警察通过排查确定杀人凶手必为4个嫌疑犯的一个。 以下为4个嫌疑犯的供词: A说&#xff1a;不是我。 B说&#xff1a;是C。 C说&#xff1a;是D。 D说&#xff1a;C在胡说 已知3个人说了真话&#xff0c;1个人说的是假话。…...

编程日记 2023/11/28 22:55:28

【TiDB】TiDB离线方式部署

目录 1 下载TiDB离线组件包 2 安装TiUP 3 合并离线包 4 TIDB 软件和硬件环境建议配置 5 TiDB环境与系统配置检查 6 生成集群初始化配置文件模板 7 执行部署命令 1 检查就能存在的潜在风险 2 手动修复风险 3 部署 TiDB 集群 8 查看TIUP管理的集群情况 9 检查部署的…...

编程日记 2023/11/28 22:54:27

android shape绘制半圆

<?xml version"1.0" encoding"utf-8"?><shape xmlns:android"http://schemas.android.com/apk/res/android"android:shape"rectangle"><sizeandroid:width"20dp"android:height"10dp" /><…...

编程日记 2023/11/28 22:53:25

【开源】基于Vue和SpringBoot的个人健康管理系统

项目编号&#xff1a; S 040 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S040&#xff0c;文末获取源码。} 项目编号&#xff1a;S040&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 健康档案模块2.2 体检档案模块2.3 健…...

编程日记 2023/11/28 22:52:24

qt QString字符串常用转换

QString字符串转换类型,常见的有: 1. const char*初始化QString.即const char*类型转QString字符串类型. QString str("肖战");qDebug() <<str; 2. QChar数组初始化QString.即QChar字符数组转QString字符串. QChar cHello[5] {H,e,l,l,o};QString strHell…...

编程日记 2023/11/28 22:50:22

JAVA sql 查询3

-- 1. 求各个月入职的的员工个数 select date_format(hiredate,%m),count(date_format(hiredate,%m)) from employees group by date_format(hiredate,%m) -- 2. 查询 50 号部门,60 号部门,70 号部门的各个部门的平均工资 SELECT department_id,avg(salary) FROM employees WH…...

编程日记 2023/11/28 22:49:21

PHP while 和 do-while 循环 学习资料

PHP while 和 do-while 循环 在 PHP 中&#xff0c;while 和 do-while 是两种常用的循环结构&#xff0c;用于重复执行一段代码&#xff0c;直到满足指定条件为止。以下是对这两种循环的介绍和示例&#xff1a; while 循环 while 循环用于在指定条件为真时重复执行代码块。循…...

编程日记 2023/11/28 22:47:19

OpenJudge NOI 1.8 16:矩阵剪刀石头布 c语言

描述 Bart的妹妹Lisa在一个二维矩阵上创造了新的文明。矩阵上每个位置被三种生命形式之一占据&#xff1a;石头&#xff0c;剪刀&#xff0c;布。每天&#xff0c;上下左右相邻的不同生命形式将会发生战斗。在战斗中&#xff0c;石头永远胜剪刀&#xff0c;剪刀永远胜布&#…...

编程日记 2023/11/28 22:46:18

mysql 性能参数调优详解

1 优化连接池 连接池运行机制 MySQL连接器中的连接池&#xff0c;用以提高数据库密集型应用程序的性能和可扩展性&#xff0c;默认启用。MySQL连接器负责管理连接池中的多个连接&#xff0c;自动创建、打开、关闭和破坏连接&#xff0c;多个连接的创建&#xff0c;可满足多客户…...

编程日记 2023/11/28 22:44:16

基于.net framework4.0框架下winform项目实现寄宿式web api

首先Nuget中下载包&#xff1a;Microsoft.AspNet.WebApi.SelfHost&#xff0c;如下&#xff1a; 注意版本哦&#xff0c;最高版本只能4.0.30506能用。 1.配置路由 public static class WebApiConfig{public static void Register(this HttpSelfHostConfiguration config){// …...

编程日记 2023/11/28 22:43:15

Vue中项目进行文件压缩与解压缩 （接口返回文件的url压缩包前端解析并展示出来，保存的时候在压缩后放到接口入参进行保存）

安装 npm install pako在Vue组件中引入pako&#xff1a; import pako from pako;接口返回的url是这个字段 tableSsjsonUrl 其实打开就是压缩包const source await tableFileUrl ({ id: this.$route.query.id}); if(source.code 0) {this.titleName source.data.tableNam…...

编程日记 2023/11/28 22:42:14

Linux shell编程学习笔记31：alias 和 unalias 操作 命令别名

目录 0 前言1 定义别名2 查看别名 2.1 查看所有别名2.2 查看某个别名 2.2.1 alias 别名2.2.2 alias | grep 别名字符串2.2.3 使用 CtrlAltE 组合键3 unalias&#xff1a;删除别名4 如何执行命令本身而非别名 4.1 方法1&#xff1a;使用 CtrlAltE 组合键 && unalias4…...

编程日记 2023/11/28 22:41:13

Django JSONField/HStoreField SQL注入漏洞（CVE-2019-14234）

漏洞描述 Django 于2019年8月1日 日发布了安全更新&#xff0c;修复了 JSONField 和 HStoreField 两个模型字段的 SQL 注入漏洞。 参考链接&#xff1a; Django security releases issued: 2.2.4, 2.1.11 and 1.11.23 | Weblog | DjangoDjango JSONField SQL注入漏洞&#x…...

编程日记 2023/11/28 22:40:12

Unity中Shader的Standard材质解析（一）

文章目录 前言一、在Unity中&#xff0c;按一下步骤准备1、在资源管理面板创建一个 Standard Surface Shader2、因为Standard Surface Shader有很多缺点&#xff0c;所以我们把他转化为顶点片元着色器3、整理只保留主平行光的Shader效果4、精简后的最终代码 前言 在Unity中&am…...

编程日记 2023/11/28 22:39:11

5.1 Windows驱动开发：判断驱动加载状态

在驱动开发中我们有时需要得到驱动自身是否被加载成功的状态&#xff0c;这个功能看似没啥用实际上在某些特殊场景中还是需要的&#xff0c;如下代码实现了判断当前驱动是否加载成功&#xff0c;如果加载成功, 则输出该驱动的详细路径信息。 该功能实现的核心函数是NtQuerySys…...

编程日记 2023/11/28 22:38:10

shell脚本--常见案例

1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件&#xff1a; 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...

编程新知 2026/1/20 4:43:14

遍历 Map 类型集合的方法汇总

1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...

编程新知 2026/1/20 18:28:18

【解密LSTM、GRU如何解决传统RNN梯度消失问题】

解密LSTM与GRU&#xff1a;如何让RNN变得更聪明&#xff1f; 在深度学习的世界里&#xff0c;循环神经网络&#xff08;RNN&#xff09;以其卓越的序列数据处理能力广泛应用于自然语言处理、时间序列预测等领域。然而&#xff0c;传统RNN存在的一个严重问题——梯度消失&#…...

编程新知 2025/12/24 1:45:14

spring：实例工厂方法获取bean

spring处理使用静态工厂方法获取bean实例&#xff0c;也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下&#xff1a; 定义实例工厂类&#xff08;Java代码&#xff09;&#xff0c;定义实例工厂&#xff08;xml&#xff09;&#xff0c;定义调用实例工厂&#xff…...

编程新知 2025/11/25 22:46:30

今日科技热点速览

&#x1f525; 今日科技热点速览 &#x1f3ae; 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售&#xff0c;主打更强图形性能与沉浸式体验&#xff0c;支持多模态交互&#xff0c;受到全球玩家热捧 。 &#x1f916; 人工智能持续突破 DeepSeek-R1&…...

编程新知 2025/11/20 14:26:29

Unit 1 深度强化学习简介

Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库&#xff0c;例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体&#xff0c;比如 SnowballFight、Huggy the Do…...

编程新知 2025/9/18 1:39:03

Linux部署私有文件管理系统MinIO

最近需要用到一个文件管理服务&#xff0c;但是又不想花钱&#xff0c;所以就想着自己搭建一个&#xff0c;刚好我们用的一个开源框架已经集成了MinIO&#xff0c;所以就选了这个 我这边对文件服务性能要求不是太高&#xff0c;单机版就可以 安装非常简单&#xff0c;几个命令就…...

编程新知 2026/1/19 6:08:55

pycharm 设置环境出错

pycharm 设置环境出错 pycharm 新建项目&#xff0c;设置虚拟环境&#xff0c;出错 pycharm 出错 Cannot open Local Failed to start [powershell.exe, -NoExit, -ExecutionPolicy, Bypass, -File, C:\Program Files\JetBrains\PyCharm 2024.1.3\plugins\terminal\shell-int…...

编程新知 2026/1/16 15:03:10

Ubuntu系统多网卡多相机IP设置方法

目录 1、硬件情况 2、如何设置网卡和相机IP 2.1 万兆网卡连接交换机&#xff0c;交换机再连相机 2.1.1 网卡设置 2.1.2 相机设置 2.3 万兆网卡直连相机 1、硬件情况 2个网卡n个相机 电脑系统信息&#xff0c;系统版本&#xff1a;Ubuntu22.04.5 LTS&#xff1b;内核版本…...

编程新知 2026/1/19 5:24:25

aardio 自动识别验证码输入

技术尝试 上周在发学习日志时有网友提议“在网页上识别验证码”&#xff0c;于是尝试整合图像识别与网页自动化技术&#xff0c;完成了这套模拟登录流程。核心思路是&#xff1a;截图验证码→OCR识别→自动填充表单→提交并验证结果。 代码在这里 import soImage; import we…...

编程新知 2026/1/20 13:43:38