测开：vue高级特性

news2025/10/31 7:41:17

vue官网地址：

Vue.js - 渐进式 JavaScript 框架 | Vue.js

上一章节：

测开：vue基本语法_做测试的喵酱的博客-CSDN博客

一、vue事件修饰符

1.1 stop: 阻止事件冒泡

事件冒泡：子元素触发某个事件之后，会依次将这个事件传递给父元素。

举例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app" @click="function3()">
			<div id="box" @click="function2()">
				<button @click="function1()">事件冒泡</button>
			</div>
		</div>
		
		<script type="text/javascript">
			var vue = new Vue({
				el:"#app",
				data:{},
				methods:{
					function1:function(){
						console.log("执行方法1")
					},
					function2:function(){
						console.log("执行方法2")
					},
					function3:function(){
						console.log("执行方法3")
					},
				}
			})
			
		</script>
	</body>
</html>

当我点击button时，会依次触发父类绑定的方法。

 

 

 我们只想执行button的事件，不想执行父类的方法。

需要使用

stop: 阻止事件冒泡

样式：@click.stop="method"

举例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app" @click="function3()">
			<div id="box" @click="function2()">
				<button @click.stop="function1()">事件冒泡</button>
			</div>
		</div>
		
		<script type="text/javascript">
			var vue = new Vue({
				el:"#app",
				data:{},
				methods:{
					function1:function(){
						console.log("执行方法1")
					},
					function2:function(){
						console.log("执行方法2")
					},
					function3:function(){
						console.log("执行方法3")
					},
				}
			})
			
		</script>
	</body>
</html>

再次点击按钮时，只触发了这一层的绑定事件。

 

1.2 prevent:阻止元素默认的事件行为

prevent:阻止元素默认的事件行为.

模板：

@click.prevent="function2()" 

举例：

如一个跳转链接。当点击这个跳转按钮时，会先执行方法function2()，然后跳转百度。

 @click.prevent="function2()" 阻止元素默认的事件行为。

点击跳转按钮后，只执行function2()，不会再跳转百度了。

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<button> <a href="www.baidu.com" @click="function2()">跳转百度</a></button>
			<button @click.stop="function1()">事件冒泡</button>
		</div>
		
		<script type="text/javascript">
			var vue = new Vue({
				el:"#app",
				data:{},
				methods:{
					function1:function(){
						console.log("执行方法1")
					},
					function2:function(){
						console.log("我要跳转百度了哟。")
					},
					function3:function(){
						console.log("执行方法3")
					},
				}
			})
			
		</script>
	</body>
</html>

二、vue按键修饰符

键盘按键，触发事件。

应用场景：

在输入框内，输入内容，然后按键盘上的回车键，进行提交。

模版：

@keyup.enter="login_btn()"

keyup.enter:回车键

keyup.tab

keyup.delete

keyup.esc

keyup.space

keyup.up

keyup.down

keyup.left

keyup.right

举例：

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

	</head>
	<body>
		<div id="app">
			<form action="">
				账号：<input type="text" v-model="loginForm.user"> <br>
				密码：<input type="password" v-model="loginForm.pwd" @keyup.enter="login_btn()"><br>
				<button type="button" @click="login_btn()">点击登录</button>
			</form>

		</div>

		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data: {
					loginForm:{
						user:'',
						pwd:''
					}
				},
				methods: {
					login_btn:function(){
						alert('点击了登录')
					}
				}
			})
		</script>


	</body>
</html>

 三、表单输入

3.1 表单修饰符

3.1.1 .trim 自动过滤用户输入的首尾空白符（常用）

.trim 自动过滤用户输入的首尾空白符,可以给v-model 添加trim 修饰符：

<input v-model.trim="msg">

 注意：

v-model 为双向绑定。

举例：

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

	</head>
	<body>
		<div id="app">
			<form action="">
				账号：<input type="text" v-model.trim="loginForm.user"> <br>
				密码：<input type="password" v-model="loginForm.pwd" @keyup.enter="login_btn()"><br>
				<button type="button" @click="login_btn()">点击登录</button>
			</form>

		</div>

		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data: {
					loginForm:{
						user:'',
						pwd:''
					}
				},
				methods: {
					login_btn:function(){
						alert('输入的用户名为:'+this.loginForm.user)
					}
				}
			})
		</script>


	</body>
</html>

在输入账号时，收尾输入的空格会被过滤掉。 

 3.1.2 .lazy v-model在失去焦点之后，才会同步数据

使用v-model，正常情况下，在输入过程中，数据是同步变化的。

使用.lazy后，v-model的数据，在失去焦点后，才会同步数据。

使用方法：

在“change"时，而非“input”时更新

<input v-mode.lazy="msg">

举例：

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

	</head>
	<body>
		<div id="app">
			<form action="">
				账号：<input type="text" v-model.lazy="loginForm.user"> <br>
				密码：<input type="password" v-model="loginForm.pwd" @keyup.enter="login_btn()"><br>
				<button type="button" @click="login_btn()">点击登录</button>
			</form>

		</div>

		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data: {
					loginForm:{
						user:'',
						pwd:''
					}
				},
				methods: {
					login_btn:function(){
						alert('输入的用户名为:'+this.loginForm.user)
					}
				}
			})
		</script>


	</body>
</html>

 四、计算属性-computed

场景：

在vue中，如果我们需要通过一个或多个数据来计算出另一个数据。

比如：根据用户选择商品的数量来计算商品的总价格。我们可以通过计算属性来实现。

计算属性是vue实例中，可以通过computed这个配置项来定义计算属性。

 

 

 

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

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

相关文章

用DQN实现Atari game（Matlab代码实现）

用DQN实现Atari game（Matlab代码实现）

目录 &#x1f4a5;1 概述 &#x1f4da;2 运行结果 &#x1f389;3 参考文献 &#x1f468;‍&#x1f4bb;4 Matlab代码 &#x1f4a5;1 概述 强化学习研究的是Agent和环境交互中如何学习最优策略&#xff0c;以获得最大收益。Agent需要能够观察环境(observe)所处的状态&…
阅读更多...
组播IP 映射 组播MAC

组播IP 映射 组播MAC

组播IP地址与组播MAC地址之间的换算方法与例子 1、在IP分类中&#xff0c;D类IP地址用于组播MAC。 2、在TCP/IP中&#xff0c;最常用的v4组播MAC地址的前24位固定为01005e&#xff0c;第25位固定为0&#xff0c;后23位由IP地址的后23位复制得出。 3、在D类组播IP中有5位未用&a…
阅读更多...
Spark-行动算子

Spark-行动算子

1、reduce&#xff08;聚合&#xff09; 2、collect&#xff08;采集&#xff09; 3、count &#xff08;统计&#xff09; 4、first 5、take 6、takeOrdered 7、aggregate 8、fold 9、countByKey 10、countByValue 11、save 算子 12、foreach 算子总结 所谓行…
阅读更多...
java编程----继承

java编程----继承

文章目录内存管理继承super向上造型内存管理 编写的xxx.java源码&#xff0c;编译为xxx.class字节码&#xff0c;由JVM&#xff08;java解释器&#xff09;来执行&#xff0c;JVM来对接不同的操作系统&#xff0c;实现一次编写&#xff0c;到处执行&#xff1b;JVM向操作系统申…
阅读更多...
王朝游戏源码服务端与客户端搭建(基于nodejs与cocoscreator)

王朝游戏源码服务端与客户端搭建(基于nodejs与cocoscreator)

成功效果:搭建步骤:安装centos7 64 2009版本操作系统下载并解压mongodb,redis,nodejs3.复制游戏服务与网站服务程序到服务器4.编译nodejsnodejs编译并安装成功后验证5.配置并启动mongodb数据库mongodb.conf配置文件内容:dbpath/home/dev/mongodb/db logpath/home/dev/mongodb/l…
阅读更多...
八、发布确认高级

八、发布确认高级

在生产环境中由于一些不明原因&#xff0c;导致 rabbitmq 重启&#xff0c;在 RabbitMQ 重启期间生产者消息投递失败&#xff0c;导致消息丢失&#xff0c;需要手动处理和恢复 如何才能进行 RabbitMQ 的消息可靠投递呢&#xff1f;特别是在这样比较极端的情况&#xff0c;Rabb…
阅读更多...
20230311给Ubuntu18.04下的GTX1080M安装驱动

20230311给Ubuntu18.04下的GTX1080M安装驱动

20230311给Ubuntu18.04下的GTX1080M安装驱动 2023/3/11 12:50 2. 安装GTX1080驱动 安装 Nvidia 驱动 367.27 sudo add-apt-repository ppa:graphics-drivers/ppa 第一次运行出现如下的警告&#xff1a; Fresh drivers from upstream, currently shipping Nvidia. ## Curren…
阅读更多...
C++语法规则4（C++面向对象）

C++语法规则4（C++面向对象）

接口&#xff08;抽象类&#xff09; 接口描述了类的行为和功能&#xff0c;而不需要完成类的特定实现。C 接口是使用抽象类来实现的&#xff0c;抽象类与数据抽象互不混淆&#xff0c;数据抽象是一个把实现细节与相关的数据分离开的概念。 如果类中至少有一个函数被声明为纯虚…
阅读更多...
在Win 11下使用Visual Studio 2019和cygwin编译JBR（Java SDK 17）源码

在Win 11下使用Visual Studio 2019和cygwin编译JBR（Java SDK 17）源码

很多文章介绍了JDK 8和JDK11源码在Linux编译&#xff0c;很少有人介绍了JDK 17在windows的编译过程&#xff0c;所以写了这篇文章&#xff0c;为什么选用JBR 17版本&#xff0c;因为JBR17 版本集成了HotSwapAgent功能&#xff0c;具体HotSwapAgent有什么用&#xff0c;请看我前…
阅读更多...
[N1CTF 2018]eating_cms1

[N1CTF 2018]eating_cms1

一个cms&#xff0c;先打开环境试了一下弱口令&#xff0c;无效&#xff0c;再试一下万能密码&#xff0c;告诉我有waf&#xff0c;先不想怎么绕过&#xff0c;直接开扫&#xff08;信息收集&#xff09;访问register.php注册一个账号进行登录上面的链接尝试用php读文件http://…
阅读更多...
学习笔记：基于SpringBoot的牛客网社区项目实现（三）之MyBatis入门

学习笔记：基于SpringBoot的牛客网社区项目实现（三）之MyBatis入门

一、数据库建表 二、entity目录下创建user实体类 三、dao目录下创建userMapper映射接口 Mapper public interface UserMapper {User selectById(int id);User selectByName(String username);User selectByEmail(String email);int insertUser(User user);int updateStatus(i…
阅读更多...
tun驱动之read

tun驱动之read

从tun驱动读取的数据&#xff0c;最终来源于用户空间通过write写入的数据&#xff0c;如下所示&#xff1a; inti fd socket(); int f open("/dev/net/tun", O_RDWR) write(fd, buf, len); --> 协议栈 --> t…
阅读更多...
3-MATLAB APP Design-切换按钮组和单选按钮组

3-MATLAB APP Design-切换按钮组和单选按钮组

一、APP 界面设计展示 1.新建一个空白的APP，在此次的学习中，我们会用到编辑字段（文本框）、切换按钮、单选按钮，首先在界面中拖入一个编辑字段（文本框），在文本框中输入内容：切换按钮和单选按钮的使用，调整背景颜色，字体的颜色为黑色，字体的大小调为26. 2.在左侧组件…
阅读更多...
Linux各种发行版介绍

Linux各种发行版介绍

Linux已经被广泛应用在人们的日常生活工作用品中&#xff0c;比如手机&#xff0c;智能家居&#xff0c;汽车电子&#xff0c;可穿戴设备等等&#xff0c;只不过很多人并不知道自己使用的电子设备里面运行的是linux系统。看一组数据&#xff1a;1.90%的公有云应用在使用Linux系…
阅读更多...
利用Dockerfile开发定制镜像实战.

利用Dockerfile开发定制镜像实战.

Dockerfile的原理 dockerfile是一种文本格式的文件&#xff0c;用于描述如何构建Docker镜像。在Dockerfile中&#xff0c;我们可以定义基础镜像、安装依赖、添加文件等操作&#xff0c;最终生成一个可以直接运行的容器镜像。 Dockerfile的原理可以分为以下几个步骤&#xff1a…
阅读更多...
如何快速为子公司创建SAP财务账套的操作步骤

如何快速为子公司创建SAP财务账套的操作步骤

相对来说在SAP上配置一家子公司比从0开始创建创建一家公司可以节省很多步骤&#xff0c;因为子公司的很多配置&#xff08;如科目表&#xff0c;科目&#xff0c;折旧表&#xff0c;折旧代码等&#xff09;可以沿用母公司的。本文就简单介绍一下创建子公司财务账套的配置步骤.只…
阅读更多...
中国省市选择插件

中国省市选择插件

快速使用 1.引用 ChineseCities.min.js 2.拷贝以下布局结构 <select id"province"><option value"请选择城市">请选择省份</option> </select> <select id"city"><option value"请选择城市">请…
阅读更多...
无监督对比学习（CL）最新必读经典论文整理分享

无监督对比学习（CL）最新必读经典论文整理分享

对比自监督学习技术是一种很有前途的方法&#xff0c;它通过学习对使两种事物相似或不同的东西进行编码来构建表示。Contrastive learning有很多文章介绍&#xff0c;区别于生成式的自监督方法&#xff0c;如AutoEncoder通过重建输入信号获取中间表示&#xff0c;Contrastive M…
阅读更多...
设备树下的LED灯

设备树下的LED灯

一、什么是设备树设备树&#xff0c;将这个词分开就是设备和树&#xff0c;描述设备树的文件叫DTS(Device Tree Source)&#xff0c;这个DTS文件采用树形结构描述板级设备&#xff0c;也就是开发板上的设备信息&#xff0c;比如CPU数量、内存基地址、IIC接口上接了哪些设备、SP…
阅读更多...
进度计划：什么是关键路径管理 1/2

进度计划：什么是关键路径管理 1/2

目录 引言 什么是关键路径法&#xff1f; 为什么 CPM 调度对项目管理很重要&#xff1f; CPM 计划元素 关键路径方如何工作&#xff1f; 引言 关键路径&#xff0c;也称为最长路径&#xff0c;是直接影响项目完成日期的一系列任务。关键路径上的每项任务都称为关键活动。…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023