Vue3 onClick() 事件监听

这段时间学习 VUE3 ，在这里记录下来。虽然很基础，但也值得记录，以备日后忘记。

一段简单的 onclick 事件

<a class="menunma flexC fl-cen" v-on:click="CallOut()" ><i class="menunmJ"></i><p>呼叫</p></a>
methods: {

    //外呼
   CallOut(){
        console.log("外呼 ");
   }
    
}

说明

v-on 指令用于添加事件监听器
v-html 解析HTML
v-bind 属性绑定
<tag> {{ a_property}} …</tag> 插值

不带参数的情况下，add可以写成 add(), 也可以写成 add 

示例

 <body>
    <header>
      <h1>Vue Events</h1>
    </header>
    <section id="events">
      <h2>Events in Action</h2>
      <button v-on:click="add(5)">Add</button>
      <button v-on:click="reduce(10)">Remove</button>
      <p>Result: {{ counter }}</p>
      <input type="text" v-on:input="setName($event,'asdf')" />
      <p>Your Name: {{name}}</p>
    </section>
  </body>

input 元素最好的监听事件是 input 事件，此事件为 vanilla JS 事件，使用vue指令v-on指定需要监听的事件, 如果需要额外的参数，第一个参数使用  $event.

const app = Vue.createApp({
  data() {
    return {
      counter: 0,
      name: "",
    };
  },
  methods: {
    add(num) {
      this.counter += num;
    },
    reduce(num) {
      this.counter -= num;
    },
    setName(event, l) {
      this.name=event.target.value + " " + l;
    }
  }
});

app.mount('#events');

 

posted @ 2023-06-30 09:55  海乐学习  阅读(769)  评论(0)  编辑  收藏  举报