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

我们可以使用v-on简写（@） 指令来监听DOM事件，并在事件执行对应的javaScrip.

使用方法：v-on:click="handler"或者@click="handler"。

 在设置背景颜色时可以把值换成一个变量，然后通过点击事件实现给变量的value赋随机值来改变背景颜色

如果要传值可以在点击事件的函数后面加上括号，如果不传值可以省略括号，传的值可以有多个。

代码示例：

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

switch开关

checked 是否打开switch开关

@change是checked 发生变化时触发 change 事件,change事件会默认传一个值.我们可以通过这个值来输出

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

switch改变时时浏览器的控制台会输出：

1. {type: 'change', timeStamp: 1978.5, target: {…}, currentTarget: {…}, detail: {…}}
   1. currentTarget: {id: '', dataset: {…}, offsetTop: 0, offsetLeft: 0}
   2. detail: {value: true}
   3. target: {id: '', dataset: {…}, offsetTop: 0, offsetLeft: 0}
   4. timeStamp: 1978.5
   5. type: "change"
   6. [[Prototype]]: Object

switch关闭时detail:value:为 false否则为true

也可以直接输出e.detail.value

代码示例：

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

我们可以通过开关对一些按钮之类的组件进行一些处理

代码示例：

<switch @change="onChange"/>
	<button type="primary" :loading="Isloading">普通按钮</button>

<script setup>
import { ref } from 'vue';

const Isloading=ref(false);
function onChange(e){
	Isloading.value=e.detail.value
}
</script>