表单修饰符和事件修饰符

表单修饰符和事件修饰符

表单修饰符

v-model.lazy

v-model.lazy 失去焦点后再收集数据

<div id="app"><textarea name="" id="" cols="30" rows="10" v-model.lazy="a"></textarea>{{a}}<textarea name="" id="" cols="30" rows="10" v-model="b"></textarea>{{b}}</div>
Vue.config.productionTip = false;var vm = new Vue({el: "#app",data() {return { a: "", b: "" }} })

在这里插入图片描述

v-model.number

v-model.number 有效转换为数字 如 "1" 转为 1 数字

<div id="app"><input type="text" v-model.number="num"><input type="text" v-model="nums" value=""><button @click="func()">点击</button>
</div>
Vue.config.productionTip = false;var vm = new Vue({el: "#app",data() {return { num: "", nums: "" }},methods: {func() {console.log(typeof this.num);console.log(typeof this.nums);}}})

在这里插入图片描述

v-model.trim

v-model.trim 过滤首尾空格

<div id="app"><input type="text" v-model.trim="num">
</div>
Vue.config.productionTip = false;var vm = new Vue({el: "#app",data() {return { num: ""}}})

在这里插入图片描述

事件修饰符

.prevent

prevent 阻止默认事件 如移动端的下拉刷新事件 form的默认提交刷新事件 a链接刷新事件

<form action="" @submit.prevent></form>
<a href="http://baidu.com" @click.prevent></a>

.stop

stop 阻止冒泡事件

 <div @click="func2()" class="box1">1<p @click="func3()" class="box2">2<span @click.stop="func4()" class="box3">3</span></p></div>
Vue.config.productionTip = false;var vm = new Vue({el: "#app",data() {return {}},methods: {func2(){console.log("div元素");},func3(){console.log("p元素");},func4(){console.log("span元素");},}})

在这里插入图片描述

拓展:阻止冒泡的几种方法

  1. addEventListnener设置为true
  2. .stop
  3. event.stopPropagation

.once

once 只触发一次

 <div @click.oncek="func1()" class="box1"> </div>
Vue.config.productionTip = false;var vm = new Vue({el: "#app",data() {return {}},methods: {func1(){console.log("div元素,但只能触发一次");}}})

.capture

capture 打乱冒泡顺序,先触发带有此修饰符的元素,若有多个此修饰符,则由外向内触发 捕获效果

 <div @click="func2()" class="box1">1<p @click.capture="func3()" class="box2">2<span @click="func4()" class="box3">3</span></p></div>
Vue.config.productionTip = false;var vm = new Vue({el: "#app",data() {return {}},methods: {func2(){console.log("div元素");},func3(){console.log("p元素");},func4(){console.log("span元素");},}})

在这里插入图片描述

.self

self 阻止自身事件触发,但不会阻止冒泡。再冒泡事件中,点击设置self下的子类,才不会触发self本身,但是点击self本身,会触发 间接有捕获效果

 <div @click="func2()" class="box1">1<p @click.self="func3()" class="box2">2<span @click="func4()" class="box3">3</span></p></div>
Vue.config.productionTip = false;var vm = new Vue({el: "#app",data() {return {}},methods: {func2(){console.log("div元素");},func3(){console.log("p元素");},func4(){console.log("span元素");},}})

在这里插入图片描述


  • 失联

最后编辑时间 2024,03,11;17:08

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

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

相关文章

【深度学习】深度估计,Depth Anything Unleashing the Power of Large-Scale Unlabeled Data

论文标题&#xff1a;Depth Anything Unleashing the Power of Large-Scale Unlabeled Data 论文地址&#xff1a;https://arxiv.org/pdf/2401.10891.pdf 项目主页&#xff1a;https://depth-anything.github.io/ 演示地址&#xff1a;https://huggingface.co/spaces/LiheYoung…

PyCharm 中 Python 解释器的配置

温馨提示&#xff1a;本文 PyCharm 版本是 2022.3.3 前言 作为 Python 新手&#xff0c;在了解了基本语法之后&#xff0c;肯定得先用 IDE 工具写个 Hello World&#xff0c;来了解 Python 编程语法及 IDE 工具的常规配置和使用&#xff0c;这里我用的 IDE 工具是 PyCharm。 …

unicloud update 修改

update 修改 使用腾讯云时更新方法必须搭配doc、where方法使用&#xff0c;db.collection(‘test’).update()会报如下错误&#xff1a;param should have required property ‘query’ collection.doc().update(Object data)未使用set、remove更新操作符的情况下&#xff0c…

如何通过libusb直接向zebra打印机发送zpl,跨平台win/linux

环境&#xff1a;windows & linux & Zebra打印机gt820 windows: 之前安装了Zebra打印机官方驱动&#xff0c;所以先卸载掉驱动。再安装Zadig&#xff0c;用Zadig工具来安装WinUSB驱动。 zadig下载&#xff1a;Zadig - USB driver installation made easy 记住这两个数…

c语言指针基础下(下)

指针 字符指针变量 字符串变量的一般使用 int main() {char ch w;char* p &ch;*p h;printf("%c", ch);return 0; }上面就是通过指针的解引用改变了ch的值 int main() {char* p "ni hao a";//这个是常量字符串printf("%s\n", p);//打印…

超融合如何助力水务公司实现虚拟化与容器环境统一管理?

近些年&#xff0c;企业 IT 基础架构现代化转型的步伐逐渐加快&#xff0c;不少金融、医疗、政府等行业的用户&#xff0c;已在生产环境部署 Kubernetes 等云原生基础设施&#xff0c;为业务应用提供敏捷支持。不过&#xff0c;一些企业的容器化转型仍处于起步阶段&#xff0c;…

学习Android的第二十八天

目录 Android Service (服务) 线程 Service (服务) Service 相关方法 Android 非绑定 Service startService() 启动 Service 验证 startService() 启动 Service 的调用顺序 Android 绑定 Service bindService() 启动 Service 验证 BindService 启动 Service 的顺序 …

Instant --java学习笔记

Instant 时间线上的某个时刻 / 时间戳过获取lnstant的对象可以拿到此刻的时间&#xff0c;该时间由两部分组成:从1970-01-01 00:00:00 开始走到此刻的总秒数不够1秒的纳秒数 Instant的常见方法&#xff1a; Instant可以用来记录代码的执行时间&#xff0c;或用于记录用户操作某…

面试经验分享 | 通关某公司面试靶场

0x00:探测IP 首先打开时候长这个样&#xff0c;一开始感觉是迷惑行为&#xff0c;试了试/admin&#xff0c;/login这些发现都没有 随后F12查看网络&#xff0c;看到几个js文件带有传参&#xff0c;就丢sqlmap跑了一下无果 随后也反查了域名一下&#xff0c;发现没有域名&#…

[java入门到精通] 20 反射精讲

复习 1.索引&#xff1a;主要是提高查询性能。 2.索引分类&#xff1a;主键索引 唯一索引 普通索引 组合索引 全文索引 hash索引 3.索引底层数据结构是btree.非叶子结点是由&#xff1a;索引指针域 叶子结点&#xff1a;索引数据(数据地址)&#xff0c;是双链表 4.jdbc:java…

《高效便捷,探索快递柜系统架构的智慧之路》

随着电商业务的蓬勃发展&#xff0c;快递柜系统作为一种高效、便捷的最后一公里配送解决方案&#xff0c;正在受到越来越多企业和消费者的青睐。本篇博客将深入探讨快递柜系统的架构设计理念、优势和实践&#xff0c;帮助读者了解如何构建智能化的快递柜系统&#xff0c;提升物…

简单的网页才好学习嘛!!!

做一个个人博客第一步该怎么做&#xff1f; 好多零基础的同学们不知道怎么迈出第一步。 那么&#xff0c;就找一个现成的模板学一学呗&#xff0c;毕竟我们是高贵的Ctrl c v 工程师。 但是这样也有个问题&#xff0c;那就是&#xff0c;那些模板都&#xff0c;太&#xff01;…

idea中操作Git将本地仓库代码完整提交到Gittee中

文章目录 1.在idea中打开你的项目根目录&#xff0c; idea中vcs -> create Git Repository2.选中你的项目所在的目录3. git commit -m"你的备注"4. 直接强制本地仓库覆盖远程仓库的东西5.或者直接使用git 进行这个操作 1.在idea中打开你的项目根目录&#xff0c; …

【Python/crawl】如何使用Python爬虫将一系列网页上的同类图片下载到本地

【需求】 从网页https://www.zhainq.com/%e7%be%8e%e5%a5%b3%e5%86%99%e7%9c%9f%e6%9c%ba%e6%9e%84/%e6%97%a5%e6%9c%ac%e7%be%8e%e5%a5%b3%e5%86%99%e7%9c%9f/109012.html 开始&#xff0c;有十七页&#xff0c;每页都有大漂亮“小濑田麻由”的若干图片&#xff0c;想要将其…

Gitee的注册和代码提交(附有下载链接)

目录 一、Git的下载和安装二、安装图形化界面工具三、在Gitee上创建仓库四、如何把仓库开源五、Clone远程仓库到本地六、拷贝代码到本地的仓库七、Add-Commit-Push到远程仓库八、可能出现的问题8.1 建议在本地仓库直接创建项目8.2 第一次Push可能出现的问题8.3 怎么删除Gitee上…

Element-Plus: Select组件实现滚动分页加载

Element-Plus的select组件并没有自带滚动分页加载的功能&#xff0c;其虽然提供了自定义下拉菜单的底部的方式可以自定义上一页及下一页操作按钮的方式进行分页加载切换&#xff1a; 但如果不想通过点击分页按钮的方式&#xff0c;利用滚动触底进行下一页加载的话&#xff0c;…

2024年太原等保测评中心名单看这里!

开年来&#xff0c;不少太原小伙伴打算做等保了。大家都在问&#xff0c;目前太原等保测评中心有哪些&#xff1f;在哪里丫&#xff1f;这不我们小编就给大家整理一下&#xff0c;仅供参考哈&#xff01; 2024年太原等保测评中心名单看这里&#xff01; 序号&#xff1a;1 …

[C++]20.实现红黑树。

实现红黑树 一.基本概念&#xff1a;1.红黑树的概念&#xff1a;2.红黑树的性质&#xff1a; 二.实现红黑树&#xff1a;1.基本结构&#xff1a;2.插入节点的多种情况&#xff1a;1.叔叔存在且为红&#xff1a;2.叔叔不存在/存在且为黑(单旋变色)3.叔叔不存在/存在且为黑(多旋&…

C/C++中{}的用法总结(全)

C基础专栏&#xff1a;http://t.csdnimg.cn/UjhPR 目录 1.定义初始化列表&#xff08;Initializer List&#xff09; 2.类成员初始化列表 3.无默认构造函数的类的默认初始化&#xff08;C11 及以后版本&#xff09; 4.初始化器列表构造函数&#xff08;C11 及以后版本&…

Docker学习之镜像管理(超详解析)

Docker镜像生命周期&#xff08;可以把docker镜像理解为虚拟机镜像&#xff09; 实验内容&#xff1a; 搜索官方仓库镜像 [rootlocalhost ~]# docker search busybox //以查找busybox为例 搜索说明&#xff1a;name镜像名称 description镜像说明 stars点赞数量 official…