我们可以使用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改变时时浏览器的控制台会输出:
- {type: 'change', timeStamp: 1978.5, target: {…}, currentTarget: {…}, detail: {…}}
- currentTarget: {id: '', dataset: {…}, offsetTop: 0, offsetLeft: 0}
- detail: {value: true}
- target: {id: '', dataset: {…}, offsetTop: 0, offsetLeft: 0}
- timeStamp: 1978.5
- type: "change"
- [[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>