鍍金池/ 問答/HTML/ vue2.0如何將組件定義的方法，用到指令中來控制按鈕的顯示和隱藏？

vue2.0如何將組件定義的方法，用到指令中來控制按鈕的顯示和隱藏？

//按鈕的組件
<template enter-active-class='animated fadeInUp' leave-active-class='animated fadeOutDown' >
    <div class="back-top" >
          <i class="fa fa-arrow-circle-o-up"></i>
    </div>
</template>
<script>
export default {
   name:'back-top',
  //  data:{
  //     isShow:true
  //  },
   methods:{//定義了一個方法來監(jiān)控滾動條的高度，當(dāng)高度>200的時候顯示按鈕
     backTop(){
                window.addEventListener('scroll',function(e){
                 if(this.screenY > 200){
                   this.style.display = 'block'
                 }else{
                   this.style.display = 'none'                   
                 }
        })
     }
   }
}
</script>
<style lang='scss' scoped>

</style>

根據(jù)代碼我有兩個疑問
1.監(jiān)控滾動條的方法已經(jīng)寫了，如何讓它和指令綁定，達(dá)到監(jiān)控滾動條的高度來控制按鈕的顯隱？
2.在methods中定義的方法，如果console.log(this.scrollY)控制臺中沒有任何的顯示，但是如果把監(jiān)控滾動條的高度代碼放到mounted（）鉤子函數(shù)中就可以console.log(this.scrollY)，這是什么原理？

回答
編輯回答
硬扛

對于你第一個疑問，可以使用樓上說的v-if或者v-show 來完成。
第二個疑問，因?yàn)槟阒皇嵌x了methods方法，但是該方法并沒有被調(diào)用，所以在backTop()方法中的事件并沒有添加。但是如果放在mounted鉤子中，每當(dāng)vue生命周期到了mounted的時候，就會自動執(zhí)行backTop()方法，那么backTop()方法中的事件才有了意義。

2018年3月25日 13:01
編輯回答
歆久

顯示的話直接給按鈕綁個v-if就行

<button v-if="isShow">

然后你的backTop放在methods里不會自動調(diào)用，所以你的console.log(this.scrollY)自然沒反應(yīng)，放到mounted里，vue生成實(shí)例的時候就會調(diào)用這個函數(shù)

mounted() {
    backTop();
}

最后你在backTop里判斷滾動條高度然后直接修改isShow的值應(yīng)該就行了。

2018年4月11日 15:15