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

我们可以使用 v-on 指令 (简写为 @) 来监听 DOM 事件，并在事件触发时执行对应的 JavaScript。有两种方法：

(1)v-on:click="handler"  

(2)@click="handler"

<template>
	<!-- @click为点击事件，onclick为函数名 -->
	<view class="box" @click="onclick">
		{{num}}
	</view>
</template>
<script setup>
import { ref } from 'vue';//ref自动生成
	 const num=ref(1)//用ref定义一个变量，监听点击事件
	
	function onclick(){
		num.value++;//点击一下num变量就加一，实现监听
	}
</script>

<style>
	.box{
		width: 200px;
		height: 200px;
		background-color: aqua;
	}
</style>

注意：为变量赋值时，必须要变量名.value，否则会发生异常 

 如果需要传值，那么在点击事件的函数后面加一个括号，括号里放入需要传输的值即可（可以有多个）

代码示例：

<view class="box" @click="onclick(1,2)" :style="{background:color}">
		{{num}}
	</view>

Switch开关

checked可以让开关默认为开启状态

disabled可以让开关为禁言状态

<switch @change="onChange"/>

@change是checked 改变时触发 change 事件，可以用它来输出一下switch开关传输的值

function onChange(e){
		console.log(e)
	}

 相反，开关关闭是那datail传的值就是false

也可以输出e.datail.value

代码示例：

function onChange(e){
		console.log(e.detail.value)
	}

这样就可以更加直观的看到switch传的值，有了值我们现在就可以对按钮进行一些处理

代码示例：

<template>
	<switch @change="onChange"/>
	<button type="primary" :loading="isLoading">按钮</button>
</template>
<script setup>
	const isLoading=ref(false)
	function onChange(e){
		isLoading.value=e.detail.value
	}
	
</script>
<style></style>

结果展示：

关闭时

 

开启时