【vue】绑定事件 v-on

news2024/11/27 2:28:42

v-on
- 简写：@
@click
@keyup
@keydown
@keyup.w
@keyup.ctrl.a

在这里插入图片描述

<!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">
        <!-- 插值表达式 -->
        {{msg}}
        <h2>{{web.title}}</h2>
        <h2>{{web.url}}</h2>
        <!-- v-on例子 -->
        <button v-on:click="edit">修改网址</button><br>
        <!-- v-on简写 -->
        <button @click="edit">修改网址(v-on简写)</button>
        <hr>
        <h2>{{web.user}}</h2>
        点文本框，按回车<input type="text" @keyup.enter="add(40,60)"><br>
        点文本框，按空格<input type="text" @keyup.space="add(40,60)"><br>
        点文本框，按Tab</Table><input type="text" @keydown.tab="add(40,60)"><br>
        点文本框，按w<input type="text" @keyup.w="add(40,60)"><br>

        Ctrl+Enter<input type="text" @keyup.ctrl.enter="add(40,60)"><br>
        Ctrl+a<input type="text" @keyup.ctrl.a="add(40,60)"><br>
    </div>

    <script type="module">
        import { createApp, reactive } from './vue.esm-browser.js'

        createApp({
            setup() {
                const web = reactive({
                    title: "tao355667",
                    url: "tao355667.com",
                    user: 0
                })

                const edit = () => {
                    web.url = "http://www.tao355667.com"
                }
                const add = (a, b) => {
                    web.user += a + b
                }

                return {
                    msg: "success",
                    web,
                    edit,
                    add
                }
            }
        }).mount("#app")
    </script>
</body>

</html>