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

效果：