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

vue学习day03-指令修饰符、v-bind对于样式控制的增强、v-model应用于其他表单元素

7、指令修饰符

(1)概念:

通过“.”指明一些指令后缀,不同后缀封装了不同的处理操作->简化代码

(2)按键修饰符

@keyup.enter->键盘回车监听

(3)v-model修饰符

v-model.trim    -> 去除首尾空格

v-model.number    ->转数字

(4)事件修饰符

@事件名.stop       ->   阻止冒泡

@事件名.prevent     ->   阻止默认行为

(5)示例

1)@keyup.enter

代码:

结果:

2)v-model修饰符
①v-model.trim    -> 去除首尾空格

代码:

结果:

②v-model.number    ->转数字

代码:

结果:

 

3)事件修饰符
①@事件名.stop       ->   阻止冒泡

代码:

结果:

②@事件名.prevent     ->   阻止默认行为

代码:

结果:

--------------------------------------------------------------

8、v-bind对于样式控制的增强

(1)v-bind对于样式控制的增强-操作calss

1)语法:    :class=“对象/数组”
①对象->键就是类名,值是布尔值。值为true有这个类;false,没有这个类

适用于:一个类名,来回切换

②数组->数组中的所有类,都会加到盒子上,本质就是一个class列表

适用于:批量添加或删除类

(类名需要用引号引起来)

2)示例

代码 :

结果:

②代码:

结果:

(2)v-bind对于样式控制的增强-操作style

1)语法:      :style=“样式对象”

2)案例

代码:

结果:

9、v-model应用于其他表单元素

常见的表单元素都可以与v-model绑定关联->快速获取或设置表单元素的值

它可以根据控件类型自动选取正确的方法来更新元素

(1)输入框input:text        ->value

(2)文本域textarea          ->value

(3)复选框input:checkbox  ->checked

(4)单选框input:radio      -> checked

(5)下拉菜单select          ->value

(6)示例:

代码:

结果:

相关文章:

vue学习day03-指令修饰符、v-bind对于样式控制的增强、v-model应用于其他表单元素

7、指令修饰符 (1)概念: 通过“.”指明一些指令后缀,不同后缀封装了不同的处理操作->简化代码 (2)按键修饰符 keyup.enter->键盘回车监听 (3)v-model修饰符 v-model.tri…...

JRE、JVM、JDK分别是什么。

JDK JDK的英文全称是Java Development Kit。JDK是用于制作程序和Java应用程序的软件开发环境。JDK 是 Java 开发工具包,它是 Java 开发者用来编写、编译、调试和运行 Java 程序的集合。JDK 包括了 Java 编译器(javac)、Java 运行时环境&…...

台灯护眼是真的吗?台灯怎么选对眼睛好?一文带你读懂!

近视问题,这一现代社会的“视力杀手”,正悄然影响着越来越多的人群,尤其是青少年群体。长时间面对电子屏幕和书本,加上不正确的用眼习惯,使得视力下降成为普遍现象。在此背景下,一款优质的护眼台灯显得尤为…...

【学术会议征稿】第五届计算机工程与智能控制学术会议(ICCEIC 2024)

第五届计算机工程与智能控制学术会议(ICCEIC 2024) 2024 5th International Conference on Computer Engineering and Intelligent Control 第五届计算机工程与智能控制学术会议(ICCEIC 2024)将于2024年10月18日至22日在广州举办&#xff0…...

【Golang】slice切片

slice Go语言的切片是对数组的抽象。 数组的使用 package mainimport ("fmt" )// 传递固定长度的数组还是值传递的方式 func printArray(myArray [5]int) {for index, value : range myArray {fmt.Println("index:", index, "value:", value)…...

开源网安模糊测试平台SFuzz全新升级,从标准到实践助力车企安全出海

开源网安模糊测试平台SFuzz全新升级,参照各国相关标准要求进行针对性建设,可为智能网联汽车信息安全测试提供更为强大的工具支持。SFuzz向被测系统输入大量随机数据,模拟各种异常情况,可以发现被测系统内潜在的缺陷和漏洞&#xf…...

Go bytes包

bytes包 Go 语言中的 bytes 包提供了用于操作字节切片的函数集合。字节切片是 Go 语言中非常常用的数据类型,用于表示二进制数据或 UTF-8 编码的字符串。 bytes 包主要功能 操作和处理字节切片搜索和比较字节切片修改和分割字节切片读取和写入字节切片 使用场景 字…...

将List切割为多个指定长度的多个List

参考: https://blog.csdn.net/baidu_41480640/article/details/122507018https://blog.csdn.net/H1767410/article/details/138333350https://blog.51cto.com/u_16213352/7632003https://blog.csdn.net/2301_82243396/article/details/137900249 手写1 private List<List&l…...

【实战】mysql加密函数AES_ENCRYPT无缝迁移到磐维2.0的加密函数MY_ENCRYPT_AES128

在mysql迁移到磐维2.0数据库过程中&#xff0c;mysql使用AES_ENCRYPT函数进行加密。 在磐维2.0数据库中&#xff0c;对应的加密函数为MY_ENCRYPT_AES128 --mysql使用AES_ENCRYPT进行加密&#xff0c;AES_DECRYPT解密 select HEX(AES_ENCRYPT(test1234,abcd2024)) from dual; …...

使用YOLO训练好自己的模型并持续训练【教程二】

前言 在使用已经训练好的 YOLOv5 模型继续训练时&#xff0c;如果减少了 yaml 文件中的 classes 分类数&#xff0c;这会对模型产生影响。具体影响取决于以下几个方面&#xff1a; 类别数量减少&#xff1a;如果你在继续训练时减少了 classes 中的类别数量&#xff0c;模型将不…...

STC32G/F/8H通用无刷电机驱动板

STC32G/F/8H通用无刷电机驱动板 &#x1f4cc;相关篇《低成本STC32G8K64驱动控制BLDC开源入门学习方案》 ✨该驱动板是在上一版的基础上改版而来。这里的STC32G/F/8H所指的是封装型号为-LQFP48的STC32G8K64、STC32G12K128、STC32F12K54、STC8H8K64U。是一款兼容有感和无感设计的…...

java Web 优秀本科毕业论文系统用eclipse定制开发mysql数据库BS模式java编程jdbc

一、源码特点 JSP 优秀本科毕业论文系统是一套完善的web设计系统&#xff0c;对理解JSP java serlvet 编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为TOMCAT7.0,eclipse开发&#xff0c;数据库为Mysql5.0&a…...

SAP_MMABAP模块_MM60物料清单通过增强新增物料描述

业务背景&#xff1a; 用户需要在系统标准的物料主数据查询报表MM60中&#xff0c;添加物料组描述&#xff0c;一直以来&#xff0c;我都觉得标准的MM60显示的内容字段不够多&#xff0c;不太好用。 以往都是给用户新开发一个物料主数据查询报表来解决的&#xff0c;但是这次刚…...

lodash中flush的使用(debounce、throttle)

在项目的配置中&#xff0c;看到了一个请求&#xff0c;类似是这样的 import { throttle } from lodash-es// 请求函数 async function someFetch(){const {data} await xxx.post()return data }// 节流函数 async function throttleFn(someFetch,1000)// 执行拿到数据函数 a…...

设计高并发秒杀系统:保障稳定性与数据一致性

✨✨谢谢大家捧场&#xff0c;祝屏幕前的小伙伴们每天都有好运相伴左右&#xff0c;一定要天天开心哦&#xff01;✨✨ &#x1f388;&#x1f388;作者主页&#xff1a; 喔的嘛呀&#x1f388;&#x1f388; 目录 引言 一. 系统架构设计 1. 系统架构图 二、 系统流程 三…...

从源码到成品:直播电商与短视频带货APP的开发之路

本篇文章&#xff0c;笔者将详细探讨从源码到成品&#xff0c;直播电商与短视频带货APP的开发过程。 一、市场调研与需求分析 通过用户调研&#xff0c;可以确定目标用户群体的需求&#xff0c;从而为产品的功能设计提供依据。 1.1市场分析 消费者对视频内容的偏好&#xff…...

C++OCR API减轻人们文字录入的负担

曾几何时&#xff0c;许多大企业会设立文字录入专员的岗位。相信有不少人第一份实习工作就是录入资料&#xff0c;文档、发票、证件等形形色色的文件堆积如山&#xff0c;日积月累的敲击键盘&#xff0c;一张一张的录入电脑系统。这种工作是枯燥的&#xff0c;可以练就文字录入…...

web安全基础名词概念

本节内容根据小迪安全讲解制作 第一天 域名&#xff1a; 1.1什么是域名&#xff1f; 网域名称(英语&#xff1a;Domain Name&#xff0c;简称&#xff1a;Domain)&#xff0c;简称域名、网域&#xff0c;是由一串用点分隔的字符组成的互联网上某一台计算机或计算机组的名称&a…...

ctfshow-web入门-文件上传(web161、web162、web163)远程包含

目录 1、web161 2、web162 3、web163 1、web161 先传配置文件&#xff0c;可以上传成功 因为我前面给的 .user.ini 都是带了图片头 GIF89a 的&#xff0c;前面的题这个图片头可以去掉&#xff0c;但是在这里如果去掉是不行的。 因此后面上传的东西我们都带上这个图片头&…...

【Gradle】(三)详细聊聊依赖管理:坐标、依赖配置、依赖传递、依赖冲突

文章目录 1.概述2.依赖管理2.1.坐标2.2.依赖的基本概念2.3.依赖配置&#xff08;Dependency configurations&#xff09;2.3.1.依赖路径2.3.2.依赖配置与依赖路径的关联 2.4.依赖传递2.4.1.准备工作2.4.2.运行时依赖传递jar包生成与依赖配置依赖树打印使用 Dependency Analyzer…...

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...

(转)什么是DockerCompose?它有什么作用?

一、什么是DockerCompose? DockerCompose可以基于Compose文件帮我们快速的部署分布式应用&#xff0c;而无需手动一个个创建和运行容器。 Compose文件是一个文本文件&#xff0c;通过指令定义集群中的每个容器如何运行。 DockerCompose就是把DockerFile转换成指令去运行。 …...

Java线上CPU飙高问题排查全指南

一、引言 在Java应用的线上运行环境中&#xff0c;CPU飙高是一个常见且棘手的性能问题。当系统出现CPU飙高时&#xff0c;通常会导致应用响应缓慢&#xff0c;甚至服务不可用&#xff0c;严重影响用户体验和业务运行。因此&#xff0c;掌握一套科学有效的CPU飙高问题排查方法&…...

人机融合智能 | “人智交互”跨学科新领域

本文系统地提出基于“以人为中心AI(HCAI)”理念的人-人工智能交互(人智交互)这一跨学科新领域及框架,定义人智交互领域的理念、基本理论和关键问题、方法、开发流程和参与团队等,阐述提出人智交互新领域的意义。然后,提出人智交互研究的三种新范式取向以及它们的意义。最后,总结…...

【 java 虚拟机知识 第一篇 】

目录 1.内存模型 1.1.JVM内存模型的介绍 1.2.堆和栈的区别 1.3.栈的存储细节 1.4.堆的部分 1.5.程序计数器的作用 1.6.方法区的内容 1.7.字符串池 1.8.引用类型 1.9.内存泄漏与内存溢出 1.10.会出现内存溢出的结构 1.内存模型 1.1.JVM内存模型的介绍 内存模型主要分…...

uniapp 实现腾讯云IM群文件上传下载功能

UniApp 集成腾讯云IM实现群文件上传下载功能全攻略 一、功能背景与技术选型 在团队协作场景中&#xff0c;群文件共享是核心需求之一。本文将介绍如何基于腾讯云IMCOS&#xff0c;在uniapp中实现&#xff1a; 群内文件上传/下载文件元数据管理下载进度追踪跨平台文件预览 二…...

Python竞赛环境搭建全攻略

Python环境搭建竞赛技术文章大纲 竞赛背景与意义 竞赛的目的与价值Python在竞赛中的应用场景环境搭建对竞赛效率的影响 竞赛环境需求分析 常见竞赛类型&#xff08;算法、数据分析、机器学习等&#xff09;不同竞赛对Python版本及库的要求硬件与操作系统的兼容性问题 Pyth…...

Python的__call__ 方法

在 Python 中&#xff0c;__call__ 是一个特殊的魔术方法&#xff08;magic method&#xff09;&#xff0c;它允许一个类的实例像函数一样被调用。当你在一个对象后面加上 () 并执行时&#xff08;例如 obj()&#xff09;&#xff0c;Python 会自动调用该对象的 __call__ 方法…...

Python第七周作业

Python第七周作业 文章目录 Python第七周作业 1.使用open以只读模式打开文件data.txt&#xff0c;并逐行打印内容 2.使用pathlib模块获取当前脚本的绝对路径&#xff0c;并创建logs目录&#xff08;若不存在&#xff09; 3.递归遍历目录data&#xff0c;输出所有.csv文件的路径…...

【Vue】scoped+组件通信+props校验

【scoped作用及原理】 【作用】 默认写在组件中style的样式会全局生效, 因此很容易造成多个组件之间的样式冲突问题 故而可以给组件加上scoped 属性&#xff0c; 令样式只作用于当前组件的标签 作用&#xff1a;防止不同vue组件样式污染 【原理】 给组件加上scoped 属性后…...