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

Vue框架学习笔记——v-bind数据单向绑定和v-model数据双向绑定

news 2026/2/12 12:39:51

文章目录

  • v-bind，数据单向绑定
    • 简写形态（省略v-bind，只留冒号）
    • 示例一（将输入框数据改为：哈哈哈哈哈）：
    • 实例二（将Vue实例中的name改为字符串："单向绑定"）：
  • v-model，数据双向绑定（并非所有属性均可使用）
    • 简写形态（保留v-model，删除冒号和value，即":value"）：
    • 示例一（将v-model对应的输入框输入数据：哈哈哈）：
    • 示例二（将Vue实例中的name改为字符串"我不知道"）：
  • 无法使用v-model的情况：
    • 示例一（使用v-bind成功）：
    • 示例二（使用v-model失败）：

v-bind，数据单向绑定

当我们将代码写成这样的时候，只使用v-bind单向绑定标签内元素的属性：

<body><div id="box"><input type="text" v-bind:value="name"></div><script type="text/javascript">Vue.config.productionTip = falsenew Vue({el: '#box',data: {name: "这里是name的值",}})</script>
</body>

会呈现如下的效果：
在这里插入图片描述
标签中的数据和Vue实例中的数据是单向绑定的，Vue实例中的对应数据改变会带着标签中的数据改变，但是标签中的数据改变则不会带着Vue实例中的数据改变。

简写形态（省略v-bind，只留冒号）

<input type="text" :value="name">

展示图片（未刷新页面，未修改代码，仅在该页面直接修改或者使用Vue开发者工具）：

示例一（将输入框数据改为：哈哈哈哈哈）：

Input输入框中的数据无法带动Vue实例中的数据一起变化
在这里插入图片描述
效果：Input中的数据改变了，但是Vue实例中的数据没有改变

实例二（将Vue实例中的name改为字符串：“单向绑定”）：

修改Vue实例数据可以改变Input输入框数据
在这里插入图片描述
效果：Vue实例中的数据改变可以带动Input中的数据改变

v-model，数据双向绑定（并非所有属性均可使用）

多应用于表单类元素，其他元素会出错。
将上述的代码修改为：

<body><div id="box">v-bind:<input type="text" v-bind:value="name"><p></p>v-model:<input type="text" v-model:value="name"></div><script type="text/javascript">Vue.config.productionTip = falsenew Vue({el: '#box',data: {name: "这里是name的值",}})</script>
</body>

就像v-bind可以简写一样，v-model针对于value值，也可以简写。

简写形态（保留v-model，删除冒号和value，即":value"）：

<input type="text" v-model="name">

不会出现错误

使用v-model就可以实现数据的双向绑定，也就是input输入框中的数据会影响Vue实例中的数据，Vue实例中的数据也会影响Input输入框中的数据。

展示图片（未刷新页面，未修改代码，仅在该页面直接修改或者使用Vue开发者工具），存在数据双向绑定和数据单向绑定的连锁反应，可以仔细自考

示例一（将v-model对应的输入框输入数据：哈哈哈）：

在这里插入图片描述
效果：修改v-model的数据会改变Vue实例中的数据，进而带动单向数据绑定的v-bind输入框一起变化

示例二（将Vue实例中的name改为字符串"我不知道"）：

在这里插入图片描述
效果：修改Vue实例中的数据会改变v-model的数据，也会改变v-bind输入框的数据

无法使用v-model的情况：

v-model只能用于表单情况，输入类元素，存在value值的情况。
不存在value值的元素无法捕捉用户的输入数据，根本不存在从元素改变数据的路径。

单选框，多选框，Input，select等等都行，它们都存在value值

示例一（使用v-bind成功）：

样例代码：

<body><div id="box"><h1 v-bind:x="name">这里</h1></div><script type="text/javascript">Vue.config.productionTip = falsenew Vue({el: '#box',data: {name: "这里是name的值",}})</script>
</body>

实例图片（使用v-bind，元素界面x属性没有丢失）：
在这里插入图片描述

示例二（使用v-model失败）：

样例代码（将示例一代码中的v-bind修改为v-model）：

<body><div id="box"><h1 v-bind:x="name">这里</h1></div><script type="text/javascript">Vue.config.productionTip = falsenew Vue({el: '#box',data: {name: "这里是name的值",}})</script>
</body>

在这里插入图片描述
h1标签中的x属性丢失，且可以在控制台（console）发现错误（模版编译失败）：
在这里插入图片描述

至此，结束。

如果你觉得这篇文章写的不错，多多点赞~收藏吧！

相关文章：

Vue框架学习笔记——v-bind数据单向绑定和v-model数据双向绑定

文章目录 v-bind&#xff0c;数据单向绑定简写形态&#xff08;省略v-bind&#xff0c;只留冒号&#xff09;示例一&#xff08;将输入框数据改为&#xff1a;哈哈哈哈哈&#xff09;&#xff1a;实例二&#xff08;将Vue实例中的name改为字符串&#xff1a;"单向绑定&quo…...

编程日记 2023/11/23 22:23:31

将对象转成URL参数

背景 有的时候前端跳转到其他平台的页面需要携带额外的参数&#xff0c;需要将对象转成用 & 连接的字符串拼接在路径后面。 实现方法...

编程日记 2023/11/23 22:21:29

【论文阅读】MAG：一种用于航天器遥测数据中有效异常检测的新方法

文章目录 摘要1 引言2 问题描述3 拟议框架4 所提出方法的细节A.数据预处理B.变量相关分析C.MAG模型D.异常分数 5 实验A.数据集和性能指标B.实验设置与平台C.结果和比较 6 结论 摘要 异常检测是保证航天器稳定性的关键。在航天器运行过程中&#xff0c;传感器和控制器产生大量周…...

编程日记 2023/11/23 22:20:28

超级武器！深入LoadRunner性能测试流程及极速分析结果！

性能测试目的 1 什么是性能测试? 性能测试是通过性能的测试工具模拟多种正常、峰值以及异常负载条件来对系统的各项性能指标进行测试。 负载测试和压力测试都属于性能测试&#xff0c;两者可以结合进行。通过负载测试&#xff0c;确定在各种工作负载下系统的性能&#xff0…...

编程日记 2023/11/23 22:19:27

解决requests库进行爬虫ip请求时遇到的错误的方法

目录 一、超时错误 二、连接错误 三、拒绝服务错误 四、内容编码错误 五、HTTP错误 在利用requests库进行网络爬虫的IP请求时&#xff0c;我们可能会遇到各种错误&#xff0c;如超时、连接错误、拒绝服务等等。这些错误通常是由目标网站的限制、网络问题或我们的爬虫代码中…...

编程日记 2023/11/23 22:18:27

大语言模型领域的重要术语解释

前言 本人对人工智能非常感兴趣&#xff0c;目前是一名初学者&#xff0c;在研究大语言模型的一些内容。很多模型都是用英文提出的&#xff0c;其中也包括很多概念&#xff0c;有些概念的中文翻译和其想表达的意思不完全一样&#xff0c;所以在这里&#xff0c;想更加精准地帮…...

编程日记 2023/11/23 22:17:25

无需公网IP，使用内网穿透实现公网访问本地OpenWRT管理界面

文章目录 1.openWRT安装cpolar2.配置远程访问地址3.固定公网地址 简单几步实现在公网环境下远程访问openWRT web 管理界面&#xff0c;使用cpolar内网穿透创建安全隧道映射openWRT web 界面面板443端口&#xff0c;无需公网IP&#xff0c;无需设置路由器。 1.openWRT安装cpola…...

编程日记 2023/11/23 22:16:24

利用 docker 实现JMeter分布式压测

为什么需要分布式&#xff1f; 在工作中经常需要对一些关键接口做高QPS的压测&#xff0c;JMeter是由Java 语言开发&#xff0c;没创建一个线程&#xff08;虚拟用户&#xff09;&#xff0c;JVM默认会为每个线程分配1M的堆栈内存空间。受限于单台试压机的配置很难实现太高的并…...

编程日记 2023/11/23 22:15:23

Sentinel 分布式系统

Sentinel 是一种分布式系统的流量防卫兵和熔断器&#xff0c;由阿里巴巴开发并开源。它的主要目标是保护分布式系统中的稳定性和可用性&#xff0c;防止因高并发或异常流量而导致的系统崩溃。下面是 Sentinel 的原理和使用教程的概要&#xff1a; Sentinel 的原理&#xff1a;…...

编程日记 2023/11/23 22:14:22

Cookie、Session、CBV加装饰器的三种方法

【0】cookie、session和Token的发展史 【1】Cookie的形式 存储形式&#xff1a;k&#xff1a;v键值对存储位置&#xff1a;客户端缺点&#xff1a;不安全&#xff0c;信息可能会泄露 【2】session的形式 标识符&#xff0c;表示我是当前用户加密出来的数据对敏感信息进行加密…...

编程日记 2023/11/23 22:13:21

【高级渗透篇】网络安全面试

【高级渗透篇】网络安全面试 1.权限维持2.代码安全Python语法相关 1.权限维持 Linux权限维持方法论 Windows权限维持方法论 2.代码安全 Python 语法相关 1、Python的值类型和引用类型是哪些 Python 中的值类型包括&#xff1a; 数字类型&#xff08;如整数、浮点数、复数…...

编程日记 2023/11/23 22:09:16

【Flink】Process Function

目录 1、ProcessFunction解析 1.1 抽象方法.processElement() 1.2 非抽象方法.onTimer() 2、Flink中8个不同的处理函数 2.1 ProcessFunction 2.2 KeyedProcessFunction 2.3 ProcessWindowFunction 2.4 ProcessAllWindowFunction 2.5 CoProcessFunction 2.6 ProcessJo…...

编程日记 2023/11/23 22:08:11

【源码分析】zeebe actor模型源码解读

zeebe actor 模型&#x1f64b;‍♂️ 如果有阅读过zeebe 源码的朋友一定能够经常看到actor.run() 之类的语法&#xff0c;那么这篇文章就围绕actor.run 方法&#xff0c;说说zeebe actor 的模型。 环境⛅ zeebe release-8.1.14 actor.run() 是怎么开始的&#x1f308; Lon…...

编程日记 2023/11/23 22:07:10

python3实现类似expect shell的交互式与SFTP的脚本

前面写过一篇关于python实现类似expect shell的交互式能力的文章&#xff0c;现在补全一下加上sftp的能力脚本。 例子在代码中__example()方法。 依赖paramiko库&#xff0c;所以需要执行pip install paramiko来安装。 import os import queue import re import threading im…...

编程日记 2023/11/23 22:05:08

java游戏制作-飞翔的鸟游戏

一.准备工作 首先创建一个新的Java项目命名为“飞翔的鸟”&#xff0c;并在src中创建一个包命名为“com.qiku.bird"&#xff0c;在这个包内分别创建4个类命名为“Bird”、“BirdGame”、“Column”、“Ground”&#xff0c;并向需要的图片素材导入到包内。 二.代码呈现 pa…...

编程日记 2023/11/23 22:04:07

NodeMCU ESP8266构建Web Server网页端控制设备

NodeMCU ESP8266构建Web Server网页端控制设备 前言 NodeMCU ESP8266 内部集成了TCP/IP协议栈&#xff0c;可以快速构建网络功能&#xff0c;搭建联网应用的硬件平台&#xff1b; ESP8266可以作为WiFi接入点&#xff08;Station&#xff09;&#xff0c;这样可以方便连接互联…...

编程日记 2023/11/23 22:02:03

搭建区块链

参考B站FISCO BCOS(十八) java SDK与区块链交互_哔哩哔哩_bilibili 林中有神君 一、搭建第一个区块链网络 根据官方文档搭建&#xff1a;搭建第一个区块链网络 — FISCO BCOS v2.9.0 文档 (fisco-bcos-documentation.readthedocs.io) 使用javajdk 控制台2.6之后 本处是2.9.2…...

编程日记 2023/11/23 22:01:02

Python通过selenium调用IE11浏览器报错解决方法

前提 正常安装Python 工具&#xff0c;selenium 包可以正常导入。IE浏览器驱动 IEDriverServer.exe 已经正确放置到已经添加path目录的文件下。 报错现象&#xff1a; 解决方法 打开浏览器进入 internet 选项 切换到安全页签 &#xff0c;去除“应用保护模式” 再次调用验证…...

编程日记 2023/11/23 22:00:01

Ubuntu 1.84.2Visual Studio Code 下载配置与vscode查看内存Hex Editor插件，简单易懂

目录 前言 一 首先我为啥要重装Vs Code呢&#xff1f; 二 下载1.84.2Visual Studio Code 三 配置Vscode终端字体 四 安装插件 前言 这是一篇将老版本的VsCode下载至最新版的博文&#xff0c;从下载到调试全篇 一 首先我为啥要重装Vs Code呢&#xff1f; 因为我想安装这个…...

编程日记 2023/11/23 21:59:00

opencv-图像金字塔

图像金字塔是一种图像处理技术&#xff0c;它通过不断降低图像的分辨率&#xff0c;形成一系列图像。金字塔分为两种类型&#xff1a;高斯金字塔和拉普拉斯金字塔。 高斯金字塔&#xff08;Gaussian Pyramid&#xff09;&#xff1a; 高斯金字塔是通过使用高斯滤波和降采样&a…...

编程日记 2023/11/23 21:57:57

Chapter03-Authentication vulnerabilities

文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...

编程新知 2026/2/12 3:06:49

DeepSeek 赋能智慧能源：微电网优化调度的智能革新路径

目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

编程新知 2025/11/20 2:48:44

LeetCode - 394. 字符串解码

题目 394. 字符串解码 - 力扣&#xff08;LeetCode&#xff09; 思路 使用两个栈&#xff1a;一个存储重复次数&#xff0c;一个存储字符串 遍历输入字符串&#xff1a; 数字处理&#xff1a;遇到数字时&#xff0c;累积计算重复次数左括号处理&#xff1a;保存当前状态&a…...

编程新知 2026/2/12 1:07:06

深入理解JavaScript设计模式之单例模式

目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式&#xff08;Singleton Pattern&#…...

编程新知 2026/1/31 17:09:43

django filter 统计数量 按属性去重

在Django中&#xff0c;如果你想要根据某个属性对查询集进行去重并统计数量&#xff0c;你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求&#xff1a; 方法1&#xff1a;使用annotate()和Count 假设你有一个模型Item&#xff0c;并且你想…...

编程新知 2026/1/11 2:37:51

STM32标准库-DMA直接存储器存取

文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA&#xff08;Direct Memory Access&#xff09;直接存储器存取 DMA可以提供外设…...

编程新知 2026/1/26 10:55:51

el-switch文字内置

el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...

编程新知 2026/1/26 10:00:16

postgresql|数据库|只读用户的创建和删除（备忘）

CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...

编程新知 2025/9/18 19:34:22

【AI学习】三、AI算法中的向量

在人工智能&#xff08;AI&#xff09;算法中&#xff0c;向量&#xff08;Vector&#xff09;是一种将现实世界中的数据&#xff08;如图像、文本、音频等&#xff09;转化为计算机可处理的数值型特征表示的工具。它是连接人类认知&#xff08;如语义、视觉特征&#xff09;与…...

编程新知 2026/1/1 14:01:45

令牌桶 滑动窗口-＞限流 分布式信号量-＞限并发的原理 lua脚本分析介绍

文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结&#xff1a; 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析&#xff1a; 实际业务去理解体会统一注…...

编程新知 2026/2/11 13:07:04