Npcink Blog
切换菜单

v-on 事件处理 - Vue3 新手基础教程

常用于点击事件中

最后更新于
本页目录1 节

语法格式：

v-on:click="methodName"
或
@click="methodName"

例子

<script src="https://unpkg.com/vue@next"></script>
<div id="app">
  <button @click="counter += 1">增加 1</button>
  <p>这个按钮被点击了 {{ counter }} 次。</p>
</div>


<script>
const app = {
  data() {
    return {
      counter: 0
    }
  }
}


Vue.createApp(app).mount('#app')
</script>
    <script src="https://unpkg.com/vue@next"></script>
    <div id="app">
        <h2>{{ msg }}</h2>
        <button @click="add">计数器:{{counte}}</button>


    </div>
    <script>
        const appRoot = {
            data() {
                return {
                    msg: "点击下方按钮开始计数",
                    counte: 1,
                }
            },
            methods: {
                add() {
                    //this.counte = this.counte + 1;
                    this.counte += 1;
                }


            },
        }


        app = Vue.createApp(appRoot);
        app.mount('#app');


    </script>

浏览器渲染

原网页中的可执行演示已停用，以下完整保留为静态 HTML 代码。

<script src="https://unpkg.com/vue@next"></script>
    <div id="app">
        <h2>{{ msg }}</h2>
        <button @click="add">计数器:{{counte}}</button>


    </div>
    <script>
        const appRoot = {
            data() {
                return {
                    msg: "点击下方按钮开始计数",
                    counte: 1,
                }
            },
            methods: {
                add() {
                    //this.counte = this.counte + 1;
                    this.counte += 1;
                }


            },
        }


        app = Vue.createApp(appRoot);
        app.mount('#app');


    </script>