uni-app学习笔记七-vue3事件处理

本文主要用于记录vue3中的点击事件和change事件

点击事件：v-on:click,可简写为@click

change事件，用于监听值发生改变的的事件处理：@change

示例代码：

<template><view class="box" @click="onClick" :style="{background:color}">{{number}}</view><view>---------------</view><switch  @change="onChange"></switch><view>---------------</view><button type="primary" :loading="isLoading">按钮</button>
</template><script setup>import {ref} from "vue"const number = ref(1)const color = ref("#fc359a")const isLoading = ref(false)function onClick(){number.value++color.value = "#"+String(Math.random()).substring(3,9)}function onChange(e){isLoading.value = e.detail.value}
</script><style lang="scss">.box{width: 200px;height: 200px;background: orange;}     
</style>

上面的代码主要实现：1.点击更换数字和背景色；2.开启和关闭开关实现开启和关闭loading效果。

上面的代码涉及到转换为字符串,String(value),字符串截取 substring(3,9)

获取change事件当前的值：e.detail.value

效果：