1-5 事件監聽

事件監聽：

       可以用 v-on 指令監聽 DOM 事件，並在觸發時運行一些 JavaScript 代碼。

html

<div>
      <button v-on:click="num+=1">按鈕</button>
      <p>{{num}}</p>
 </div>

js

data() {
    return {
      num: 1,
     }
}

點擊前點擊後每點擊一次就增加一次

然而許多事件處理邏輯會更爲複雜，所以直接把 JavaScript 代碼寫在 v-on 指令中是不可行的。因此 v-on 還可以接收一個需要調用的方法名稱。

methods方法

html:

<div>
   <button v-on:click="handlerClick">按鈕1</button>
</div>

js

data() {
    return {
      show: false,
    }
  },
  methods: {
    handlerClick() {
      console.log(this);//this指向當前組件
      //this來索引當前data中的數據
      this.show = !this.show;
    }
  }

點擊按鈕1後在瀏覽器控制檯可以看到相關數據

事件參數：

<template>
    <!--在template，只能存在一個根組件-->
    <div class="event">
        <ul>
            <li v-on:click="getItemInfo(index,$event)" v-for="(name,index) in names">{{name}}</li>//v-on:click可簡寫@click
        </ul>
    </div>
</template>
<script>
export default {
  data(){
      return{
          names:["iwen","ime","ice"]
      }
  },
  methods:{
      //事件中默認參數event
      getItemInfo(data,event){
          console.log(this.names[data]);
          console.log(event);
      }
  }
}
</script>
<style>

</style>

    效果圖：