1. 程式人生 > >vue學習六 元素點選觸發事件(無v-for父子關係)

vue學習六 元素點選觸發事件(無v-for父子關係)

1.在學習vue專案中,需使用如下需求:點選按鈕後,遮罩層顯示出來。本來若有v-for父子關係的,可以使用index進行迴圈遍歷實現,而無關聯的元素,則需要繫結類class來實現。

2.對點選元素繫結方法

<img src="../../static/pic/btn-info.png" alt="" class="btn-info" v-on:click="displayInfo">

3.對遮罩層設定class繫結元素

 <div class="fixed-info" :class="[styles]"></div>

4.對styles進行點選方法的設定

styles:null,
 methods:{
   displayInfo(){
        this.styles='display';
    }
}