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

news2024/11/15 14:03:41

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)示例:

代码:

结果:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1908788.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

报修小程序论文(设计)开题报告

一、课题的背景和意义 近些年来,随着移动互联网巅峰时期的来临,互联网产业逐渐趋于“小、轻、微”的方向发展,符合轻应用时代特点的各类技术受到了不同领域的广泛关注。在诸多产品中,被誉为“运行着程序的网站”之名的微信小程序…

Linux学习笔记(二)账户和组

一、基本概念 用 户:用户id,被称为UID 基本组:账户id,被称为GID。用户只能加一个基本组。 0代表超级管理员,root账号。 附加组:用户能加多个基本组。 二、添加账户和组 创建用户名tom,失效…

千古雄文《渔樵问对》原文、译文、解析

邵雍《渔樵问对》:开悟奇文,揭示世界的终极意义 【邵雍《渔樵问对》:开悟奇文,揭示世界的终极意义】 邵雍(1011年1月21日-1077年7月27日,宋真宗大中祥符四年十二月二十五日戌时生至神宗熙宁十…

ctfshow web入门 nodejs web334--web337

web334 有个文件下载之后改后缀为zip加压就可以得到两个文件 一个文件类似于index.php 还有一个就是登录密码登录成功就有flag username:ctfshow password:123456因为 return name!CTFSHOW && item.username name.toUpperCase() && item.password passwor…

Python 处理Excel 文件, openpyxl 库的使用:

下载&#xff1a; pip install openpyxl 基本使用&#xff1a; 新建一个Excel 工作簿&#xff1a; 使用openpyxl 需要先导入一个Workbook 类&#xff0c; 使用它可以创建一个Workbook<工作簿>对象&#xff0c; 也就是创建一个Excel表文件&#xff0c; web.active 可用来…

电动卡丁车语音芯片方案选型:让驾驶体验更智能、更安全

在追求速度与激情的电动卡丁车领域&#xff0c;每一次升级都意味着更加极致的驾驶体验。而今天&#xff0c;我们要介绍的&#xff0c;正是一款能够显著提升电动卡丁车智能化与安全性的语音芯片方案——为您的爱车增添一份独特的魅力与安全保障。 智能化升级&#xff0c;从“听…

2.5 C#视觉程序开发实例1----CamManager实现模拟相机采集图片

2.5 C#视觉程序开发实例1----CamManager实现模拟相机采集图片 1 目标效果视频 CamManager 2 CamManager读取本地文件时序 3 BD_Vision_Utility添加代码 3.0 导入链接库 BD_OperatorSets.dllSystem.Windows.Forms.dllOpencvSharp 3.1 导入VisionParam中创建的文件Util_FileO…

《Windows API每日一练》9.1 资源-图标

本节讲述图标、鼠标指针位图、字符串资源表、自定义资源的添加和应用。 本节必须掌握的知识点&#xff1a; 图标 第56练&#xff1a;ICON图标资源 鼠标指针位图 字符串资源表 自定义资源 第57练&#xff1a;字符串资源表和自定义资源 9.1.1 图标 在 Windows 窗口编程中&…

西门子老将,跳槽ABB当CEO~

导语 大家好&#xff0c;我是社长&#xff0c;老K。专注分享智能制造和智能仓储物流等内容。 新书《智能物流系统构成与技术实践》 更多的海量【智能制造】相关资料&#xff0c;请到智能制造online知识星球自行下载。 近日&#xff0c;全球领先的电力和自动化技术公司ABB宣布了…

Python | Leetcode Python题解之第223题矩形面积

题目&#xff1a; 题解&#xff1a; class Solution:def computeArea(self, ax1: int, ay1: int, ax2: int, ay2: int, bx1: int, by1: int, bx2: int, by2: int) -> int:area1 (ax2 - ax1) * (ay2 - ay1)area2 (bx2 - bx1) * (by2 - by1)overlapWidth min(ax2, bx2) - …

allWebPlugin中间件实现ActiveX插件在谷歌、火狐、Edge浏览器使用

下载并安装allWebPlugin中间件 1、请从下面地址下载allWebPlugin中间件产品&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1xUyQDzOabh7mU7J7TYhtig?pwdz3q0 提取码&#xff1a;z3q0 如下图所示&#xff0c;下载最新allWebPlugin_x86_v2.0.0.14_stable_20240707…

用XDR的思路保护API安全

云计算飞速发展的今天&#xff0c;越来越多应用程序已经转为选择云原生架构&#xff0c;这就少不了Serverless、微服务、API等技术的协助。 但同时也有越来越多的企业认识到&#xff0c;一定程度的“API安全”在整体安全与合规态势中发挥着至关重要的作用。然而&#xff0c;对…

华为eNSP:HCIA综合实验

一实验要求 HCIA综合实验的配置要求&#xff1a; 1.ISP路由器只能配置IP地址&#xff0c;之后不进行任何配置 2.内部整个网络基于192.168.1.0/24进行地址划分 3.R1/2之间启动OSPF协议&#xff0c;单区域 4.PC1-4自动获取IP地址 5.PC1-4&#xff0c;可以访问PC5&#xff0c;R2…

macbook触控栏养宠物:Touchbar pet for Mac 免费下载

macbook pro自从出了touchbar后&#xff0c;看起来是十分的炫酷&#xff0c;但平时却很少有人使用&#xff0c;为了让touchbar充分利用起来&#xff0c;Touch bar pet就横空出世了&#xff0c;可爱的画风&#xff0c;简单的玩法&#xff0c;让你可以在touchbar上也可以养一只自…

使用 Qt 和 ECharts 进行数据可视化

文章目录 示例图表预览折线图散点图柱状图使用 Qt 和 ECharts 进行数据可视化一、准备工作1. 安装 Qt2. 准备 ECharts二、在 Qt 中使用 ECharts1. 创建 Qt 项目2. 配置项目文件3. 在 UI 中添加 WebEngineView4. 加载 ECharts三、创建折线图、散点图和柱状图1. 折线图2. 散点图3…

8.8.8.8 IP地址的作用

在跟着韦东山老师的学习手册中看见了关于8.8.8.8 IP用于检测网络状态&#xff0c;然后搜索了关于此IP的相关作用如下&#xff1a; 公共DNS服务&#xff1a;8.8.8.8是Google提供的两个公共DNS服务器地址之一&#xff08;另一个是8.8.4.4&#xff09;。DNS&#xff08;域名系统&a…

Windows右键没有新建Word、PPT与Excel的解决方法

本文介绍在Windows电脑中&#xff0c;右键与资源管理器的“新建”选项中&#xff0c;都没有新建Word、PPT或Excel文件的解决方法。 最近&#xff0c;发现一台重装了系统与Office的电脑中&#xff0c;无论是桌面上与资源管理器中的右键&#xff0c;还是资源管理器左侧顶部的“新…

【机器学习】(基础篇二) —— 监督学习和无监督学习

监督学习和无监督学习 本文介绍机器学习的分类&#xff0c;监督学习和无监督学习 监督学习 监督学习&#xff08;Supervised Learning&#xff09;是机器学习的一个核心分支&#xff0c;大部分的机器学习任务都是由监督学习完成的。 它涉及到使用带有标签的训练数据来训练模…

【C语言】测试TCP带宽程序

多线程测带宽 服务端 #include <stdio.h> #include <stdlib.h> #include <string.h> #include <unistd.h> #include <arpa/inet.h> #include <sys/socket.h> #include <sys/epoll.h> #include <time.h> #include <pthrea…

Spring Boot:连接MySQL错误Public Key Retrieval is not allowed

环境&#xff1a; MySQL版本&#xff1a;8.0.17 SpringBoot版本&#xff1a;2.5.15 解决 解决方式很简单&#xff0c;在数据库配置连接字符串spring.datasource.url末尾添加&allowPublicKeyRetrievaltrue即可&#xff0c;如下图&#xff1a; 重新启动&#xff0c;恢复正常…