原生事件监听及组件内置事件处理

监听事件

我们可以使用 v-on 指令 (简写为 @) 来监听 DOM 事件,并在事件触发时执行对应的 JavaScript。用法:v-on:click="handler" 或 @click="handler"。

事件处理器 (handler) 的值可以是:

内联事件处理器:事件被触发时执行的内联 JavaScript 语句 (与 onclick 类似)。

方法事件处理器:一个指向组件上定义的方法的属性名或是路径。

先简单演示一下v-on指令,代码如下:

复制代码
<template>
	<view>
		<view class="box" v-on:click="onClick">
			
		</view>
	</view>
</template>

<script setup>
	
	function onClick(){
		console.log(12321)
	}
</script>

<style>
.box{
	width: 200px;
	height:200px;
	background: orange;
}
</style>

在script中写入函数onClick,函数作用为打印12321,然后用v-on:click指令关联onClick函数,效果如下:

打印成功,现在我们设定值num,设定每点击一次,它的值都会加1,代码如下:

复制代码
<template>
	<view>
		<view class="box" v-on:click="onClick">
			{{num}}
		</view>
	</view>
</template>

<script setup>
	import {ref} from "vue" ;
	const num = ref(1) ;
	function onClick(){
		num.value ++ ;
	}
</script>

<style>
.box{
	width: 200px;
	height:200px;
	background: orange;
}
</style>

效果如下:

接下来, 定义一个颜色变量,然后在template中调用,代码如下:

复制代码
<template>
	<view>
		<view class="box" @click="onClick" :style="{background:color}">
			{{num}}
		</view>
	</view>
</template>

<script setup>
	import {ref} from "vue" ;
	const num = ref(1) ;
	const color = ref("#fc359a")
	function onClick(){
		num.value ++ ;
	}
</script>

<style>
.box{
	width: 200px;
	height:200px;
	background: orange;
}
</style>

效果如下:

颜色可以由# + 6个数字构成,那么,我们现在写个函数,让其随机生成6个数字作为#后面的六位数,然后将其赋值给变量color,这样就可以实现,点击跳转随机颜色了,代码如下:

复制代码
<template>
	<view>
		<view class="box" @click="onClick" :style="{background:color}">
			{{num}}
		</view>
	</view>
</template>

<script setup>
	import {ref} from "vue" ;
	const num = ref(1) ;
	const color = ref("#fc359a")
	function onClick(){
		num.value ++ ;
		color.value = "#" + String(Math.random()).substring(3,9) ;
	}
</script>

<style>
.box{
	width: 200px;
	height:200px;
	background: orange;
}
</style>

效果如下:

Switch组件的@change属性内置了返回值(true or false),可以通过switch组件来控制button按钮的loading属性。创建函数,在函数中,将返回值赋值给loading的关联变量就可以了,代码如下:

复制代码
<template>
	<view>
		<view class="box" @click="onClick" :style="{background:color}">
			{{num}}
		</view>
	</view>
	<switch @change="onchange"></switch>
	<button type="primary" :loading="isloading">普通按钮</button>
</template>

<script setup>
	import {ref} from "vue" ;
	const num = ref(1) ;
	const color = ref("#fc359a")
	const isloading = ref(true)
	function onClick(){
		num.value ++ ;
		color.value = "#" + String(Math.random()).substring(3,9) ;
	}
	function onchange(e){
		isloading.value = e.detail.value
		console.log(e.detail.value)
	}
</script>

<style>
.box{
	width: 200px;
	height:200px;
	background: orange;
}
</style>

效果如下:

相关推荐
爬虫程序猿3 小时前
用 Python 给京东商品详情做“全身 CT”——可量产、可扩展的爬虫实战
开发语言·爬虫·python
十一吖i3 小时前
vue3表格显示隐藏列全屏拖动功能
前端·javascript·vue.js
徐同保5 小时前
tailwindcss暗色主题切换
开发语言·前端·javascript
蓝纹绿茶5 小时前
bash:**:pip:***python: 错误的解释器: 没有那个文件或目录
开发语言·python·pip
生莫甲鲁浪戴5 小时前
Android Studio新手开发第二十七天
前端·javascript·android studio
云知谷5 小时前
【经典书籍】C++ Primer 第15章类虚函数与多态 “友元、异常和其他高级特性” 精华讲解
c语言·开发语言·c++·软件工程·团队开发
START_GAME6 小时前
深度学习Diffusers:用 DiffusionPipeline 实现图像生成
开发语言·python·深度学习
不爱编程的小九九6 小时前
小九源码-springboot088-宾馆客房管理系统
java·开发语言·spring boot
Evand J7 小时前
【MATLAB例程】到达角度定位(AOA),平面环境多锚点定位(自适应基站数量),动态轨迹使用EKF滤波优化。附代码下载链接
开发语言·matlab·平面·滤波·aoa·到达角度
细节控菜鸡7 小时前
【2025最新】ArcGIS for JS 实现随着时间变化而变化的热力图
开发语言·javascript·arcgis