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

【vue】v-model 双向数据绑定

news 文章来源：https://blog.csdn.net/m0_63070489/article/details/137655781 2024/10/28 5:19:56
  • :value：单向数据绑定
  • v-model：双向数据绑定

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app"><h2>文本框 {{data.text}}</h2><h2>单选框 {{data.radio}}</h2><h2>复选框 {{data.checkbox}}</h2><h2>记住密码 {{data.remember}}</h2><h2>下拉框 {{data.select}}</h2><hr><!-- 单向数据绑定 --><p>单向数据绑定</p><input type="text" :value="data.text"><hr><!-- 双向数据绑定 --><p>双向数据绑定</p><input type="text" v-model="data.text"><br><!-- 对radio,v-model绑定的是后面的value --><input type="radio" v-model="data.radio" value="1">写作<input type="radio" v-model="data.radio" value="2">阅读<br><!-- 对checkbox,v-model绑定的是后面的value--><input type="checkbox" v-model="data.checkbox" value="a">篮球<input type="checkbox" v-model="data.checkbox" value="b">足球<br><input type="checkbox" v-model="data.remember">记住密码<br><!-- 对select,v-model绑定的是option里的value--><select v-model="data.select"><option value="1">管理员</option><option value="2">部门领导</option><option value="3">员工</option></select></div><script type="module">import { createApp, reactive } from './vue.esm-browser.js'createApp({setup() {const data = reactive({text: "tao3555667.com",radio: "",checkbox: [],remember: false,select: ""})return {data}}}).mount("#app")</script>
</body></html>

参考

https://www.bilibili.com/video/BV1nV411Q7RX

相关文章：

【vue】v-model 双向数据绑定

:value&#xff1a;单向数据绑定v-model&#xff1a;双向数据绑定 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0">…...

编程日记 2024/4/17 2:23:16

C#创建磁性窗体的方法：创建特殊窗体

目录 一、磁性窗体 二、磁性窗体的实现方法 (1)无标题窗体的移动 (2)Left属性 (3)Top属性 二、设计一个磁性窗体的实例 &#xff08;1&#xff09;资源管理器Resources.Designer.cs设计 &#xff08;2&#xff09;公共类Frm_Play.cs &#xff08;3&#xff09;主窗体 …...

编程日记 2024/4/17 2:21:14

Gateway 基本配置指南：构建高效的网络接入网关

简介&#xff1a; Gateway 是一个常用的网络接入网关&#xff0c;它可以帮助组织实现安全、可靠和高性能的网络连接。本文将介绍 Gateway 的基本配置&#xff0c;帮助读者了解如何正确配置和部署一个高效的 Gateway 网关。 1.网络拓扑规划&#xff1a; 在配置 Gateway 前&#…...

编程日记 2024/4/17 2:16:08

自定义类型: 结构体 (详解)

本文索引 一. 结构体类型的声明1. 结构体的声明和初始化2. 结构体的特殊声明3. 结构体的自引用 二. 结构体内存对齐1. 对齐规则2. 为啥存在对齐?3. 修改默认对齐值 三. 结构体传参四. 结构体实现位段1. 什么是位段?2. 位段的内存分配3. 位段的应用4. 位段的注意事项 ​ 前言:…...

编程日记 2024/4/17 2:14:06

设计模式(23)：访问者模式

定义 表示一个作用于某对象结构中的各元素的操作&#xff0c;它使我们可以在不改变元素的类的前提下定义作用与这些元素的新操作。 模式动机 对于存储在一个集合中的对象&#xff0c;他们可能具有不同的类型(即使有一个公共的接口)&#xff0c;对于该集合中的对象&#xff0…...

编程日记 2024/4/17 2:12:04

【C++】类和对象③（类的默认成员函数：拷贝构造函数 | 赋值运算符重载）

&#x1f525;个人主页&#xff1a;Forcible Bug Maker &#x1f525;专栏&#xff1a;C 目录 前言 拷贝构造函数 概念 拷贝构造函数的特性及用法 赋值运算符重载 运算符重载 赋值运算符重载 结语 前言 本篇主要内容&#xff1a;类的6个默认成员函数中的拷贝构造函数…...

编程日记 2024/4/17 2:08:00

掀起区块链开发狂潮！Scaffold-eth带你一键打造震撼DApp

文章目录 前言一、Scaffold-eth是什么&#xff1f;二、安装和配置1.准备工作2.安装3.配置开发环境 三、进阶使用1.放入自己的合约2.部署运行 总结 前言 前面的文章传送&#x1f6aa;&#xff1a;hardhat入门 与 hardhat进阶 在之前的文章中&#xff0c;我们已经探讨了使用Har…...

编程日记 2024/4/17 2:06:59

【Qt 学习笔记】Qt常用控件 | 按钮类控件Check Box的使用及说明

博客主页&#xff1a;Duck Bro 博客主页系列专栏&#xff1a;Qt 专栏关注博主&#xff0c;后期持续更新系列文章如果有错误感谢请大家批评指出&#xff0c;及时修改感谢大家点赞&#x1f44d;收藏⭐评论✍ Qt常用控件 | 按钮类控件Check Box的使用及说明 文章编号&#xff1a;…...

编程日记 2024/4/17 1:59:54

android gradle 配置远程仓库

build.gradle buildscript { ext.kotlin_version "1.6.0" // 使用适合你项目的Kotlin版本 repositories { maven { url http://maven.aliyun.com/nexus/content/groups/public/ } maven { url http://maven.aliyun.com/nexus/content/repos…...

编程日记 2024/4/17 1:57:53

第十二章 OpenGL ES 基础-色温、色调、亮度、对比度、饱和度、高光

第十二章 OpenGL ES 基础-色温、色调、亮度、对比度、饱和度、高光 第一章 OpenGL ES 基础-屏幕、纹理、顶点坐标 第二章 OpenGL ES 基础-GLSL语法简单总结 第三章 OpenGL ES 基础-GLSL渲染纹理 第四章 OpenGL ES 基础-位移、缩放、旋转原理 第五章 OpenGL ES 基础-透视投影…...

编程日记 2024/4/17 1:56:51

力扣经典150题解析之二十八：盛最多水的容器

目录 力扣经典150题解析之二十八&#xff1a;盛最多水的容器1. 介绍2. 问题描述3. 示例4. 解题思路5. 算法实现6. 复杂度分析7. 测试与验证测试用例设计测试结果分析 8. 总结9. 参考文献感谢阅读 力扣经典150题解析之二十八&#xff1a;盛最多水的容器 1. 介绍 在这篇文章中&…...

编程日记 2024/4/17 1:55:50

Rockchip Android13 Vold（二）：Framework层

目录 前言 1、接收VolumeInfo状态 2、通知VolumeInfo状态变化 3、创建StorageVolume...

编程日记 2024/4/17 1:54:49

Oracle数据库故障类别及日常运维规划策略

一、故障类别 1、语句故障 单个数据库操作失败&#xff08;select、insert、update或delete&#xff09;&#xff0c;如&#xff1a; 在表中输入无效的数据&#xff0c;解决方法&#xff1a;可与用户合作来验证并更正数据&#xff1b;执行操作&#xff0c;但权限不足&#x…...

编程日记 2024/4/17 1:46:41

电商技术揭秘九：搜索引擎中的SEO数据分析与效果评估

相关系列文章 电商技术揭秘一&#xff1a;电商架构设计与核心技术 电商技术揭秘二&#xff1a;电商平台推荐系统的实现与优化 电商技术揭秘三&#xff1a;电商平台的支付与结算系统 电商技术揭秘四&#xff1a;电商平台的物流管理系统 电商技术揭秘五&#xff1a;电商平台的个性…...

编程日记 2024/4/17 1:37:32

多线程传参以及线程的优缺点

进程是资源分配的基本单位 线程是调度的基本单位 笼统来说&#xff0c;线程有以下优点&#xff1a; 创建一个新线程的代价要比创建一个新进程小得多 与进程之间的切换相比&#xff0c;线程之间的切换需要操作系统做的工作要少很多 线程占用的资源要比进程少很多 能充分利用多…...

编程日记 2024/4/17 1:34:29

keil创建单片机工程

一、创建工程 打开Keil uVision4&#xff0c;依次选择 Project—>New uVision4 Project&#xff0c;选择工程保存路径及填写工程名称&#xff0c;如下图 然后点“保存”。在Select a CPU Data Base File中选择"STC MCU Database"&#xff0c;点 "OK"&am…...

编程日记 2024/4/17 1:33:27

QT 串口助手 学习制作记录

QT 串口助手qt 学习制作记录 参考教程&#xff1a;​​​​​​QT初体验&#xff1a;手把手带你写一个自己的串口助手_qt设计串口助手的流程图-CSDN博客 Qt之串口编程&#xff08;添加QSerialPort模块&#xff09;_如何安装 qt串口模块教程-CSDN博客 串口调试助手&#xff1…...

编程日记 2024/4/17 1:32:26

Github 2024-04-13 Rust开源项目日报Top10

根据Github Trendings的统计，今日(2024-04-13统计)共有10个项目上榜。根据开发语言中项目的数量，汇总情况如下： 开发语言项目数量Rust项目10CUE项目1Go项目1Tauri: 构建小型、快速和安全的桌面应用程序 创建周期：1673 天开发语言：Rust协议类型：Apache License 2.0Star数量…...

编程日记 2024/4/17 1:31:25

大模型日报｜今日必读的10篇大模型论文

大家好&#xff0c;今日必读的大模型论文来啦&#xff01; 1.谷歌推出新型 Transformer 架构&#xff1a;反馈注意力就是工作记忆 虽然 Transformer 给深度学习带来了革命性的变化&#xff0c;但二次注意复杂性阻碍了其处理无限长输入的能力。 谷歌研究团队提出了一种新型 T…...

编程日记 2024/4/17 1:28:20

深度学习 Lecture 8 决策树

一、决策树模型&#xff08;Decision Tree Model) 椭圆形代表决策节点&#xff08;decison nodes)&#xff0c;矩形节点代表叶节点&#xff08;leaf nodes)&#xff0c;方向上的值代表属性的值&#xff0c; 构建决策树的学习过程&#xff1a; 第一步&#xff1a;决定在根节点…...

编程日记 2024/4/17 1:26:19

打包 docker 容器镜像到另一台电脑

# 提交容器为镜像 <container_id> 容器id my_migration_image 镜像名称 docker commit <container_id> my_migration_image # 保存镜像为tar文件 docker save my_migration_image > my_migration_image.tar 在另一台电脑上导入上面的镜像&#xff0c;请…...

编程日记 2024/4/17 1:25:14

贪心算法--购买股票

给你一个整数数组 prices &#xff0c;其中 prices[i] 表示某支股票第 i 天的价格。 在每一天&#xff0c;你可以决定是否购买和/或出售股票。你在任何时候 最多 只能持有 一股 股票。你也可以先购买&#xff0c;然后在 同一天 出售。 返回 你能获得的 最大 利润 。 示例 1&a…...

编程日记 2024/4/17 1:22:12

在Mac主机上连接Linux虚拟机

前言 最近醉心于研究Linux&#xff0c;于是在PD上安装了一个Debian Linux虚拟机&#xff0c;用来练练手。但是每次在mac和Linux之间切换很是麻烦&#xff0c;有没有一种方法&#xff0c;可以在mac终端直接连接我的虚拟机&#xff0c;这样在mac终端上就可以直接操控我的Linux虚…...

编程日记 2024/4/17 1:21:10

前端如何单独做虚拟奖金池？

公司业务需求要做一个虚拟奖金池&#xff0c;具体是需求是&#xff0c;不需要后端数据支持&#xff0c;但是又需要不同用户看到的奖金池数据每次变动都是一致的&#xff0c;并且要在给定的最小最大值中变动。 一开始看需求&#xff0c;因为需要所有登录/未登录&#xff0c;不同…...

编程日记 2024/4/17 1:19:08

前端md5校验文件

前端获取文件的md5值&#xff0c;与文件一同传到后端&#xff0c;后端同样对md5值进行校验。如果相同&#xff0c;则文件未被损坏&#xff08;其实这种方式优点类似于tcp、ip的差错校验&#xff0c;好像token也是这种方式&#xff09; 项目准备 前端并不可能手写一个算法来实…...

编程日记 2024/4/17 1:18:07

总结SQL相对常用的几个字符函数

目录 字符的截取 substr() trim()、ltrim()、rtrim() 字符串的拼接 ||、 字符的大小写转换 upper(column_name):大写 lower(column_name):小写 字符替换 replace() 搜索字符 instr(column_name, substring_to_find,start,n_appearence) charindex(substring_to_fi…...

编程日记 2024/4/17 1:17:05

云计算笔记

RAID的组合方式 RAID0&#xff1a;多个硬盘同时工作&#xff0c;可提供性能&#xff0c;无冗余机制 RAID1&#xff1a;数据保存多份&#xff0c;提供冗余机制&#xff0c;性能受到影响 RAID3&#xff1a;存在数据盘和单独校验盘&#xff0c;数据写入 至数据盘后需要运算且将…...

编程日记 2024/4/17 1:14:03

网络安全学习路线-超详细

零基础小白&#xff0c;到就业&#xff01;入门到入土的网安学习路线&#xff01; 在各大平台搜的网安学习路线都太粗略了。。。。看不下去了&#xff01; 建议的学习顺序&#xff1a; 一、网络安全学习普法&#xff08;心里有个数&#xff0c;要进去坐几年&#xff01;&#x…...

编程日记 2024/4/17 1:12:00

【多模态检索】Coarse-to-Fine Visual Representation

快手文本视频多模态检索论文 论文&#xff1a;Towards Efficient and Effective Text-to-Video Retrieval with Coarse-to-Fine Visual Representation Learning 链接&#xff1a;https://arxiv.org/abs/2401.00701 摘要 近些年&#xff0c;基于CLIP的text-to-video检索方法…...

编程日记 2024/4/17 1:10:59

VRRP——虚拟路由冗余协议

什么是VRRP 虚拟路由冗余协议VRRP&#xff08;Virtual Router Redundancy Protocol&#xff09;是一种用于提高网络可靠性的容错协议。 通过VRRP&#xff0c;可以在主机的下一跳设备出现故障时&#xff0c;及时将业务切换到备份设备&#xff0c;从而保障网络通信的连续性和可…...

编程日记 2024/4/17 1:09:58

怎么利用公网做网站/论坛营销

http://www.liaohuqiu.net/cn/posts/leak-canary-read-me/ LeakCanary 中文使用说明 10 May 2015 LeakCanary Android 和 Java 内存泄露检测。 “A small leak will sink a great ship.” - Benjamin Franklin 千里之堤&#xff0c; 毁于蚁穴。 -- 《韩非子喻老》 demo 一个非常…...

编程日记 2024/10/28 3:57:07

网站开发交接表/免费永久个人域名注册

1. 问题描述&#xff1a; 6x6的方格&#xff0c;沿着格子的边线剪开成两部分。要求这两部分的形状完全相同。如图就是可行的分割法。 来源&#xff1a;http://oj.ecustacm.cn/problem.php?id1320 2. 思路分析&#xff1a; ① 分析题目可以知道我们需要求解对称分割的方案…...

编程日记 2024/10/28 3:24:14

吉林住房和城乡建设部网站/百度小说风云榜总榜

其实对于字母而言&#xff0c;思路相当于是26个字母的映射表 算法实现如下&#xff1a; // isBroStr2.cpp : 定义控制台应用程序的入口点。 // #include "stdafx.h" #include <iostream> using namespace std; const int MAX58; int isBroStr(char* s1,cha…...

编程日记 2024/10/28 1:34:56

网站地图怎么生成/做搜索引擎优化的企业

每天1小时&#xff0c;算12小时&#xff0c;剩3009小时...

编程日记 2024/10/27 23:08:16

做网站的公司算外包公司吗/朋友圈广告推广代理

每日一言&#xff1a;当下的付出&#xff0c;是明日的花卉。 Android 存储路径 Log.d("内置SD卡路径&#xff1a;指定图片保存的路径",Environment.getExternalStorageDirectory().getAbsolutePath()); Log.d("默认的图片路径",Environment.getExternalSt…...

编程日记 2024/10/27 18:05:21

如何在各大网站发布信息/网店推广方案策划书

作者&#xff1a;王大伟 微软最有价值专家(MVP) 来源&#xff1a;Python爱好者社区说起追热点&#xff0c;杜蕾斯第二&#xff0c;没人敢第一&#xff01;在我的印象中&#xff0c;每次有重大新闻时&#xff0c;杜蕾斯总会出一些让人拍案叫绝的文案内容&#xff0c;我精选了一…...

编程日记 2024/10/27 16:13:11