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

Vue 双向数据绑定

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

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

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

JSON详细教程

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

DSP介绍及CCS

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

周期串(Periodic Strings)

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

C语言——猜凶手

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

【TiDB】TiDB离线方式部署

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

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" /><…...

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

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

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…...

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…...

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

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

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

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

mysql 性能参数调优详解

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

基于.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){// …...

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…...

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…...

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…...

Unity中Shader的Standard材质解析(一)

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

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

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

Android Wi-Fi 连接失败日志分析

1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分&#xff1a; 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析&#xff1a; CTR…...

利用ngx_stream_return_module构建简易 TCP/UDP 响应网关

一、模块概述 ngx_stream_return_module 提供了一个极简的指令&#xff1a; return <value>;在收到客户端连接后&#xff0c;立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量&#xff08;如 $time_iso8601、$remote_addr 等&#xff09;&a…...

mongodb源码分析session执行handleRequest命令find过程

mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程&#xff0c;并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令&#xff0c;把数据流转换成Message&#xff0c;状态转变流程是&#xff1a;State::Created 》 St…...

SCAU期末笔记 - 数据分析与数据挖掘题库解析

这门怎么题库答案不全啊日 来简单学一下子来 一、选择题&#xff08;可多选&#xff09; 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘&#xff1a;专注于发现数据中…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序

一、开发准备 ​​环境搭建​​&#xff1a; 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 ​​项目创建​​&#xff1a; File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...

【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表

1、行为树节点分类 在 Nav2(Navigation2)的行为树框架中,行为树节点插件按照功能分为 Action(动作节点)、Condition(条件节点)、Control(控制节点) 和 Decorator(装饰节点) 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务,直接与硬件、传感器或外部系统…...

OkHttp 中实现断点续传 demo

在 OkHttp 中实现断点续传主要通过以下步骤完成&#xff0c;核心是利用 HTTP 协议的 Range 请求头指定下载范围&#xff1a; 实现原理 Range 请求头&#xff1a;向服务器请求文件的特定字节范围&#xff08;如 Range: bytes1024-&#xff09; 本地文件记录&#xff1a;保存已…...

OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波(Mean Shift Filtering)函数meanShiftFiltering()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 在 GPU 上对图像执行 均值漂移滤波&#xff08;Mean Shift Filtering&#xff09;&#xff0c;用于图像分割或平滑处理。 该函数将输入图像中的…...

深度学习习题2

1.如果增加神经网络的宽度&#xff0c;精确度会增加到一个特定阈值后&#xff0c;便开始降低。造成这一现象的可能原因是什么&#xff1f; A、即使增加卷积核的数量&#xff0c;只有少部分的核会被用作预测 B、当卷积核数量增加时&#xff0c;神经网络的预测能力会降低 C、当卷…...

React---day11

14.4 react-redux第三方库 提供connect、thunk之类的函数 以获取一个banner数据为例子 store&#xff1a; 我们在使用异步的时候理应是要使用中间件的&#xff0c;但是configureStore 已经自动集成了 redux-thunk&#xff0c;注意action里面要返回函数 import { configureS…...