1-4渐隐渐显的导航

1.style样式的动态绑定
2.生命周期
3.事件监听

<template>
  <div class="about">
    <h1 class="nav" :style="{opacity:opacity}">This is an about page</h1>
  </div>
</template>
<script>
export default {
  data(){
    return {
      opacity:0
    }
  },
  mounted(){
    window.addEventListener("scroll",this.handle)
  },
  methods:{
    handle(){
      var height = document.documentElement.scrollTop;
      /* 到达300完全显示 */
      var opacity = height/300;
      if(opacity>1){
        opacity = 1;
      }
      console.log(opacity)
      this.opacity = opacity;
    }
  },
  destroyed(){
    window.removeEventListener("scroll",this.handle)
  }
}
</script>
<style scoped>
  .nav{
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height: 40px;
    background: red;
    z-index: -1;
  }
</style>