vue2.0如何将组件定义的方法，用到指令中来控制按钮的显示和隐藏？

Question

//按钮的组件
<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:{//定义了一个方法来监控滚动条的高度，当高度>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>

根据代码我有两个疑问
1.监控滚动条的方法已经写了，如何让它和指令绑定，达到监控滚动条的高度来控制按钮的显隐？
2.在methods中定义的方法，如果console.log(this.scrollY)控制台中没有任何的显示，但是如果把监控滚动条的高度代码放到mounted（）钩子函数中就可以console.log(this.scrollY)，这是什么原理？

Answer 1

显示的话直接给按钮绑个v-if就行

<button v-if="isShow">

然后你的backTop放在methods里不会自动调用，所以你的console.log(this.scrollY)自然没反应，放到mounted里，vue生成实例的时候就会调用这个函数

mounted() {
    backTop();
}

最后你在backTop里判断滚动条高度然后直接修改isShow的值应该就行了。

Answer 2

对于你第一个疑问，可以使用楼上说的v-if或者v-show 来完成。
第二个疑问，因为你只是定义了methods方法，但是该方法并没有被调用，所以在backTop()方法中的事件并没有添加。但是如果放在mounted钩子中，每当vue生命周期到了mounted的时候，就会自动执行backTop()方法，那么backTop()方法中的事件才有了意义。