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

Vue 双向数据绑定

news 2025/11/17 17:19:44

之前通过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

Linux链表操作全解析

Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表&#xff1f;1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...

编程新知 2025/8/28 9:42:18

java 实现excel文件转pdf | 无水印 | 无限制

文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具，自己手写的难度，恐怕高级程序员花费一年的事件，也…...

编程新知 2025/11/5 4:10:42

理解 MCP 工作流：使用 Ollama 和 LangChain 构建本地 MCP 客户端

&#x1f31f; 什么是 MCP&#xff1f; 模型控制协议 (MCP) 是一种创新的协议&#xff0c;旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议&#xff0c;它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...

编程新知 2025/11/17 4:24:04

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

鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南

1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发&#xff0c;使用DevEco Studio作为开发工具&#xff0c;采用Java语言实现&#xff0c;包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...

编程新知 2025/9/24 10:52:31

力扣-35.搜索插入位置

题目描述 给定一个排序数组和一个目标值&#xff0c;在数组中找到目标值&#xff0c;并返回其索引。如果目标值不存在于数组中&#xff0c;返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...

编程新知 2025/8/22 2:47:34

在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的？

uni-app 中 Web-view 与 Vue 页面的通讯机制详解 一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件&#xff0c;用于在原生应用中加载 HTML 页面&#xff1a; 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...

编程新知 2025/8/6 2:19:46

【Linux】Linux 系统默认的目录及作用说明

博主介绍&#xff1a;✌全网粉丝23W&#xff0c;CSDN博客专家、Java领域优质创作者&#xff0c;掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围&#xff1a;SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物…...

编程新知 2025/11/12 18:56:32

CSS | transition 和 transform的用处和区别

省流总结&#xff1a; transform用于变换/变形&#xff0c;transition是动画控制器 transform 用来对元素进行变形&#xff0c;常见的操作如下&#xff0c;它是立即生效的样式变形属性。 旋转 rotate(角度deg)、平移 translateX(像素px)、缩放 scale(倍数)、倾斜 skewX(角度…...

编程新知 2025/10/17 20:59:57

uniapp 集成腾讯云 IM 富媒体消息（地理位置/文件）

UniApp 集成腾讯云 IM 富媒体消息全攻略&#xff08;地理位置/文件&#xff09; 一、功能实现原理 腾讯云 IM 通过 消息扩展机制 支持富媒体类型&#xff0c;核心实现方式&#xff1a; 标准消息类型&#xff1a;直接使用 SDK 内置类型&#xff08;文件、图片等&#xff09;自…...

编程新知 2025/10/25 5:53:05