009.Vue3入门,最基础的事件处理,点击按钮增加次数,支持传参

1、代码如下:

<template>
  <h3>内联事件处理群</h3>
  <button @click="addCount1">Add</button>
  <p>{{ count1 }}</p>
  <button @click="addCount2('hello')">按钮</button>
  <p>{{ count2 }}</p>
</template>

<script>
export default {
  data() {
    return {
      count1: 0,
      count2: 0
    }
  },
  methods: {
    addCount1() {
      //读取到data里面的数据方案:this.count
      this.count1++;
    },
    addCount2(msg) {
      //读取到data里面的数据方案:this.count
      console.log(msg);
      this.count2++;
    }
  }
}
</script>

2、效果如下:

 

posted @ 2024-08-10 17:12  像一棵海草海草海草  阅读(3)  评论(0编辑  收藏  举报