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

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

news 2026/4/29 6:07:02

文章目录

  • 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

Android Content Provider 基础

Android ContentProvider 完全入门指南 1. 什么是 ContentProvider&#xff1f; ContentProvider&#xff08;内容提供者&#xff09;是 Android 四大组件之一&#xff0c;它的核心职责是在不同应用之间安全地共享数据。举个例子&#xff1a;你写的 App 想读取手机通讯录中的…...

编程新知 2026/4/29 4:02:12

OpCore Simplify：黑苹果配置的革命性简化工具，告别复杂EFI构建难题

OpCore Simplify&#xff1a;黑苹果配置的革命性简化工具&#xff0c;告别复杂EFI构建难题 【免费下载链接】OpCore-Simplify A tool designed to simplify the creation of OpenCore EFI 项目地址: https://gitcode.com/GitHub_Trending/op/OpCore-Simplify 还在为黑苹…...

编程新知 2026/4/29 2:05:36

若依(RuoYi-Vue)代码生成器实战：从零掌握单表CURD开发

前言若依框架是国内最流行的Spring Boot后台管理系统之一&#xff0c;其强大的代码生成器可以让我们告别繁琐的增删改查开发&#xff0c;只需几步操作就能生成完整的业务代码。本文将完整记录使用若伊代码生成器完成单表CURD的全流程&#xff0c;并分享实际开发中遇到的各种&qu…...

编程新知 2026/4/29 1:35:29

2026 AI社交发展报告：Agent社交如何成为下一代数字生态的核心

数据来源&#xff1a;机乎平台2026年2-4月公开运营数据、Moltbook行业分析报告、长江证券研究报告&#xff08;2026年2月&#xff09;、国家网信办等五部门《人工智能拟人化互动服务管理暂行办法》&#xff08;2026年4月10日公布&#xff09;、GII全球AI社交市场报告&#xff0…...

编程新知 2026/4/29 1:04:10

用LVGL v8.3设计一个简洁的状态栏：从布局对齐到响应式适配的完整实践

用LVGL v8.3设计一个简洁的状态栏&#xff1a;从布局对齐到响应式适配的完整实践 在嵌入式UI开发中&#xff0c;状态栏作为用户界面的"信息中枢"&#xff0c;既要保证关键信息的清晰展示&#xff0c;又要适应不同屏幕尺寸的变化。LVGL v8.3作为轻量级图形库的佼佼者&…...

编程新知 2026/4/29 0:57:20

量子计算技术路线与Shor算法实现挑战

1. 量子计算发展现状全景量子计算作为颠覆性计算范式&#xff0c;其核心在于利用量子比特&#xff08;qubit&#xff09;的叠加态和纠缠特性实现指数级并行计算能力。当前全球量子计算发展呈现出"技术路线多元化、应用探索加速化"的鲜明特征。根据2024年最新统计数据…...

编程新知 2026/4/29 0:34:48

ESP32物联网继电器板开发与应用指南

1. ESP32 IoT继电器板项目概述这款信用卡大小的ESP32物联网继电器板最近在Kickstarter上引起了我的注意。作为一名长期从事智能家居开发的工程师&#xff0c;我见过太多ESP32继电器板&#xff0c;但这款产品的几个设计亮点确实值得深入探讨。它集成了四个工业级继电器&#xff…...

编程新知 2026/4/29 0:15:39

2026年CSDN技术趋势预测：九大颠覆性技术重塑数字未来

2026年CSDN技术趋势预测&#xff1a;九大颠覆性技术重塑数字未来&#x1f4cb; 目录摘要一、引言&#xff1a;技术拐点与价值落地二、AI大模型&#xff1a;从规模竞赛到能力深耕2.1 百万上下文时代到来2.2 MoE架构普及与垂直小模型崛起2.3 AI Agent成为主流形态2.4 边缘端AI成为…...

编程新知 2026/4/28 23:28:58

5步掌握NewTab Redirect!：从零基础到专业级新标签页自定义

5步掌握NewTab Redirect!&#xff1a;从零基础到专业级新标签页自定义 【免费下载链接】NewTab-Redirect NewTab Redirect! is an extension for Google Chrome which allows the user to replace the page displayed when creating a new tab. 项目地址: https://gitcode.co…...

编程新知 2026/4/28 21:15:14

无线串口对传模块：4G全网通适配，远程串口无缝对接

4G无线串口对传模块(又称4G DTU/4G串口透传模块) 是一种工业级物联网通信设备&#xff0c;核心作用是将传统的RS232/RS485串口设备&#xff0c;通过4G蜂窝网络实现远距离、双向、透明的数据传输。一、功能特点 4G全域远距离传输 依托4G蜂窝通信技术&#xff0c;突破地域限制&am…...

编程新知 2026/4/28 20:48:03