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

Vue 双向数据绑定

news 2026/4/12 23:22:16

之前通过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来完成的数据绑定，属性值和表达式进行绑定，表达式的值发生变化了属性值也跟着发生变化。单向数据绑定： <!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详细教程

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

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

DSP介绍及CCS

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

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

周期串（Periodic Strings）

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

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

C语言——猜凶手

题目： 日本某地发生了一件谋杀案，警察通过排查确定杀人凶手必为4个嫌疑犯的一个。以下为4个嫌疑犯的供词: A说：不是我。 B说：是C。 C说：是D。 D说：C在胡说已知3个人说了真话，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的个人健康管理系统

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

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

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 中，while 和 do-while 是两种常用的循环结构，用于重复执行一段代码，直到满足指定条件为止。以下是对这两种循环的介绍和示例： while 循环 while 循环用于在指定条件为真时重复执行代码块。循…...

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

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

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

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

mysql 性能参数调优详解

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

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

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

首先Nuget中下载包：Microsoft.AspNet.WebApi.SelfHost，如下： 注意版本哦，最高版本只能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： 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：删除别名4 如何执行命令本身而非别名 4.1 方法1：使用 CtrlAltE 组合键 && unalias4…...

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

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

漏洞描述 Django 于2019年8月1日日发布了安全更新，修复了 JSONField 和 HStoreField 两个模型字段的 SQL 注入漏洞。参考链接： 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中，按一下步骤准备1、在资源管理面板创建一个 Standard Surface Shader2、因为Standard Surface Shader有很多缺点，所以我们把他转化为顶点片元着色器3、整理只保留主平行光的Shader效果4、精简后的最终代码前言在Unity中&am…...

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