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

常用于点击事件中

语法格式:

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">
        <h1>{{ msg }}</h1>
        <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>

浏览器渲染

{{ msg }}

给TA赞赏
共{{data.count}}人
人已赞赏
⚠️
Npcink上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
无意侵害您的权益,请发送邮件至 1355471563#qq.com 或点击右侧 私信:Muze 反馈,我们将尽快处理。
购物车
优惠劵
搜索