Vue （v-bind指令、el与data的两种写法、理解MVVM、数据代理、V-no事件处理、双向数据绑定V-model、登陆页面实现
V-bind指令
el与data两种写法
MVVM
数据代理
V-no事件处理
V-no用于监听DOM对象
双向数据绑定V-model
v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。
按钮的事件我们可以使用 v-on 监听事件，并对用户的输入进行响应。
下拉选项实例：
<!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" style="font-size: 25px;"><select v-model="selectedOption"><option value="option1">选项1</option><option value="option2">选项2</option><option value="option3">选项3</option></select><p>你选择的选项是: {{ selectedOption }}</p></div><script>new Vue({el: '#app',data: {selectedOption: 'option1'}});</script>
</body></html>
<!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>
<style>.father_box {background-color: rgb(231, 168, 168);width: 800px;height: 800px;margin: auto;border-radius: 50px}.head_box {/* background-color: aqua; */height: 100px;width: 400px;margin: auto;font-size: 60px;color: black;font-style: italic;text-align: center;}.center_box {/* background-color: aqua; */width: 500px;height: 500px;margin: auto;}input {width: 300px;height: 40px;position: relative;left: 100px;border: 1px solid black;background-color: rgb(255, 255, 255);font-family: Arial, Helvetica, sans-serif;border-radius: 5px;padding: 5px;margin: 10px;font-size: 20px;}
</style><body><div class="father_box" id="father"><div class="head_box">请登录</div><div class="center_box"><div> <label for="username">账号：</label><input type="text" id="username" v-model="userName"></div><div> <label for="password">密码：</label><input type="password" id="password" v-model="passWord"></div><button style="font-size: 25px; " v-on:click="save"> 登录</button></div></div></body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>new Vue({el: '#father',data() {return {userName: "",passWord: "",}},methods: {save() {localStorage.setItem('username', this.userName);localStorage.setItem('password', this.passWord);}},mounted() {this.userName = localStorage.getItem('username');this.passWord = localStorage.getItem('password');}})
</script></html>
相关文章：
Vue （v-bind指令、el与data的两种写法、理解MVVM、数据代理、V-no事件处理、双向数据绑定V-model、登陆页面实现
V-bind指令 el与data两种写法 MVVM 数据代理 V-no事件处理 V-no用于监听DOM对象 双向数据绑定V-model v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。 按钮的…...
SpringBoot - SpringBoot手写模拟SpringBoot启动过程
依赖 建一个工程，两个Module: 1. springboot模块，表示springboot框架的源码实现 2. user包，表示用户业务系统，用来写业务代码来测试我们所模拟出来的SpringBoot 首先，SpringBoot是基于的Spring，所以我…...
40. 组合总和 II - 力扣（LeetCode）
题目描述 给定一个候选人编号的集合 candidates 和一个目标数 target ，找出 candidates 中所有可以使数字和为 target 的组合。 candidates 中的每个数字在每个组合中只能使用 一次 。 注意：解集不能包含重复的组合。 输入示例 candidates [10,1,2,7,…...
第15届蓝桥杯嵌入式省赛准备第二天总结笔记(使用STM32cubeMX创建hal库工程+按键输入)
一.查看电路图 按键是使用的PB0,PB1,PB2,PA0四个引脚，然后使用CubeMX配置引脚，4个脚都配置为输入模式和上拉。 程序生成之后把不用的删掉，需要的留下，这里我把函数名改了。 然后写按键扫描读取程序，这里参考的正点原子…...
【论文阅读】One For All: Toward Training One Graph Model for All Classification Tasks
目录 0、基本信息1、研究动机2、创新点——One For All ：unique features3、准备4、具体实现4.1、用TAGs统一来自不同领域的图数据4.2、用NOI（NODES-OF-INTEREST）统一不同图任务4.2.1、NOI子图4.2.2、NOI提示结点 4.3、用于图的上下文学习&am…...
Python多线程爬虫——数据分析项目实现详解
前言 前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家：https://www.captainbed.cn/z 「个人网站」：雪碧的个人网站 ChatGPT体验地址 文章目录 前言爬虫获取cookie网站爬取与启动CS…...
unity全局音量管理/全局音量设置与音量设置界面（含静音功能）
前言 本文将会介绍如何使用audiomixer实现全局音量控制，并且会介绍如何实现游戏内的含静音功能的音量设置界面。 本人也是个初学者，在看过一些关于音量管理的教程后，发现使用audiomixer实现全局音量控制可能是最方便、功能最完备、强大的&a…...
C++ vector 数组转换、查找、最大最小值、排序、排行的几种用法
C vector中常用到排序、取最值，一些场景可能还会要计算某个元素的排行，以下就是一些实际例子，精简、有效。 【1】会涉及到数组转vector： vector<int> v(arr, arr N); // N为数组size，可用sizeof(arr)/sizeof(i…...
vmware 安装Rocky-9.3系统
安装系统截图 安装完成，启动 查看版本和内核 开启远程登陆授权 1、编辑配置文件 #提升权限，输入su,并输入密码 su #编辑ssh文件开启root远程登陆 vi /etc/ssh/sshd_config找到以下内容：#PermitRootLogin prohibit-password 添加：…...
C++提高编程——模板
本专栏记录C学习过程包括C基础以及数据结构和算法，其中第一部分计划时间一个月，主要跟着黑马视频教程，学习路线如下，不定时更新，欢迎关注。 当前章节处于： ---------第1阶段-C基础入门 ---------第2阶段实战…...
单线程、同步、异步、预解析、作用域、隐式全局变量、对象创建、new
单线程 进程 cpu 资源分配的最小单位一个进程可以有多个线程 线程 cpu调度的最小单位线程建立在进程的建立基础上的一次程序的运行单位 线程分为：单线程 多线程 单线程：js是单线程 （同一个时间只能完成一个任务）多线程&…...
《设计模式的艺术》笔记 - 外观模式
介绍 外观模式中外部与一个子系统的通信通过一个统一的外观角色进行，为子系统中的一组接口提供一个一致的入口。外观模式定义了一个高层接口，这个接口使得子系统更加容易使用。外观模式又称为门面模式，它是一种对象结构型模式。 实现 myclas…...
sql 查询时间范围内的数据
要查询特定时间范围内的数据，您可以使用 SQL 中的 BETWEEN 运算符。以下是一个示例查询，它从名为 your_table 的表中检索在 start_date 和 end_date 之间创建的所有记录： SELECT * FROM your_table WHERE created_date BETWEEN start_date AN…...
TestNG中的@BeforeSuite注释
目录 什么是BeforeSuite注解？ BeforeSuite带注释的方法何时执行？ BeforeSuite annotation有什么用？ 所以，是时候集思广益了 我们可以在一个类中使用多个BeforeSuite注释方法吗？ BeforeSuite放在超类上时如何工作…...
[学习笔记]刘知远团队大模型技术与交叉应用L3-Transformer_and_PLMs
RNN存在信息瓶颈的问题。 注意力机制的核心就是在decoder的每一步，都把encoder的所有向量提供给decoder模型。 具体的例子 先获得encoder隐向量的一个注意力分数。 注意力机制的各种变体 一：直接点积 二：中间乘以一个矩阵 三：…...
图像处理工具包Pillow的使用分享
Pillow 是 Python 中一个流行的图像处理库，它是 PIL（Python Imaging Library）的一个友好的分支版本。Pillow 提供了许多功能，使得图像处理变得容易和方便。下面是一些基本用法和示例： 安装 Pillow 首先，你…...
python进程间通信——命名管道（Named Pipe、FIFO）
文章目录 Python中的命名管道：深入理解进程间通信1. 命名管道简介2. 创建和删除命名管道3. 写入命名管道4. 读取命名管道5. 示例：进程间通信write_to_pipe.pyread_from_pipe.py测试运行 6. 注意事项和限制命名管道的半双工机制命名管道读写任意一方未打开…...
03 OSPF 学习大纲
参考文章 1 初步认识OSPF的大致内容(第三课)-CSDN博客 2...
HJ7 取近似值【C语言】
【华为机试题 HJ7】取近似值 描述输入描述：输出描述：示例1示例2参考代码1参考代码2参考代码3描述 写出一个程序，接受一个正浮点数值，输出该数值的近似整数值。如果小数点后数值大于等于 0.5 ,向上取整；小于 0.5 ，则向下取整。 数据范围：保证输入的数字在 32 位浮点数范…...
php基础学习之常量
php常量的基本概念 常量是在程序运行中的一种不可改变的量（数据），常量一旦定义，通常不可改变（用户级别）。 php常量的定义形式 使用define函数：define("常量名字", 常量值);使用cons…...
保姆级教程：在华大HC32L136上驱动SPI屏，用DMA发送提升刷屏效率
华大HC32L136单片机SPI屏DMA驱动实战指南 在物联网设备和智能硬件开发中，流畅的图形界面往往能大幅提升用户体验。而实现这一目标的关键，在于高效稳定的显示驱动设计。本文将深入探讨如何利用华大半导体HC32L136单片机的SPI接口与DMA控制器，构…...
语义搜索失效？NotebookLM这4类文档结构陷阱正悄悄拖垮你的研究效率，立即排查！
更多请点击： https://intelliparadigm.com 第一章：语义搜索失效？NotebookLM这4类文档结构陷阱正悄悄拖垮你的研究效率，立即排查！ NotebookLM 的语义搜索能力依赖于底层文档的语义连贯性与结构清晰度。当文档存在隐性结…...
使用 curl 命令直接测试 Taotoken 聊天补全接口连通性与返回
🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度 使用 curl 命令直接测试 Taotoken 聊天补全接口连通性与返回 在开发或调试过程中，有时你可能需要绕过高级 SDK…...
Prism `IContainerRegistry` 详细调查与讲解
Prism IContainerRegistry 详细调查与讲解 1. 什么是 IContainerRegistry？ IContainerRegistry 是 Prism Library 提供的依赖注入容器抽象注册接口。它位于 Prism.Ioc 命名空间。 作用：在 PrismApplication 的 protected override void RegisterTypes(IC…...
Minecraft MASA模组汉化包：打破语言障碍的终极解决方案
Minecraft MASA模组汉化包：打破语言障碍的终极解决方案 【免费下载链接】masa-mods-chinese 一个masa mods的汉化资源包 项目地址: https://gitcode.com/gh_mirrors/ma/masa-mods-chinese 还在为Minecraft中MASA模组的英文界面感到困扰吗？MASA模组…...
JetBrains IDE试用期重置工具：开发者的智能许可证管家
JetBrains IDE试用期重置工具：开发者的智能许可证管家 【免费下载链接】ide-eval-resetter 项目地址: https://gitcode.com/gh_mirrors/id/ide-eval-resetter 当开发工具的试用期倒计时成为你编码时的心理负担，当每次启动IDE都要面对那个令人焦虑…...
如何用QKeyMapper实现Windows键鼠手柄自由映射：免费开源终极指南
如何用QKeyMapper实现Windows键鼠手柄自由映射：免费开源终极指南 【免费下载链接】QKeyMapper [按键映射工具] QKeyMapper，Qt开发Win10&Win11可用，不修改注册表、不需重新启动系统，可立即生效和停止。支持游戏手柄映射到键鼠&…...
【LabVIEW】驱动文件部署策略全解析：项目嵌入与系统集成的权衡与实践
1. LabVIEW驱动文件部署的核心挑战 第一次用LabVIEW控制仪器设备时，我盯着官方提供的驱动压缩包发呆了半小时——该把这些文件扔到哪个文件夹？这个问题看似简单，却直接关系到后续开发的便利性和项目可移植性。经过多个项目的实战验证…...
前后端分离项目避坑指南：为什么你的网关CORS配置了还是报跨域错误？
前后端分离项目避坑指南：为什么你的网关CORS配置了还是报跨域错误？ 在前后端分离架构中，跨域资源共享（CORS）问题一直是开发者绕不开的"拦路虎"。即便在网关层正确配置了CORS规则，开发者仍可能遇到…...
【免费下载】 UVM标准库源代码及用户指南资源
UVM标准库源代码及用户指南资源 简介 本仓库提供了统一验证方法论（Universal Verification Methodology, UVM）的多个关键版本的源代码压缩包。UVM是一种用于电子设计验证的高级验证方法学，由Accellera Systems Initiative开发并标准化&#x…...