Vue3的事件-CSDN博客

本文链接：https://blog.csdn.net/m0_74096456/article/details/147978722

1.1⿏标点击事件

Vue3使用v-on:click来表示鼠标的点击事件，也可简写@cick

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body >
    <div id="app">
        <p v-if="money>0">金钱大于0</p>
          <p v-if="money>=20">金钱大于等于20</p>
            <p v-if="money>100">金钱大于100</p>
            <button @Click="add">点我增加钱</button>
            <p>{{money}}</p>

    </div>
    <script type="module">
        import {createApp,ref,reactive} from "./vue.esm-browser.js"
    
       createApp({
        setup(){
            const money=ref(20)
             const add=()=>{
                console.log(money.value)
                money.value=money.value+20
            }
            return {
                money,
                add
            }
           
        }
       }).mount("#app")
    </script>
</body>
</html>

运行效果：

点击按钮就会调用add函数实现金钱的增加。

1.2其它常见事件

常见的事件有空格事件、回车事件、tab事件、按键事件等

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
<button v-on:click="changvuel">{{msg}}</button>

回车键被按下：<input type="text" @keyup.enter="anliu('回车键被按下')">

回车键被按下：<input type="text" @keydown.enter="anliu('回车键被按下')">


    </div>
<script type="module">
     import {createApp,reactive,ref} from "./vue.esm-browser.js"
   createApp({
   setup(){
    const msg=ref("frank")
    const changvuel=()=>{
       msg.value="jack"
        console.log("hello")
    }
 const anliu=(e)=>{
    alert(e)
 }
    return{
        msg,
        changvuel,
        anliu
    }
   }
   }).mount("#app")
</script>
</body>
</html>

实现效果：@keyup.enter和@keydown.enter分别会在回车抬起和回车键按下触发不同的函数实现不同的效果类似的还行@keyup.a就是按下键盘a键抬起就会触发相应的事件。

其他还有组合键事件
⽇常操作中，很多情况会使⽤组合按键进⾏操作，Vue3提供了组合键触发的事件，：