vue语法阻止内部内容滚动

<template>
     <div>
         <ul>
             <li v-for="item in list">
                 <h1>{{item}}</h1>
             </li>
         </ul>
         <div @touchmove.prevent class="layer"></div>
     </div>
</template>

<script>
import myButton from './components/myButton.vue'
export default {
     data () {
         return {
             list : [1,2,3,4,5,6,7,8,9,10]
         }
     }
}

</script>

<style>
body,html {width:100%;height:100%}
h1{margin-top:10rem;}
.layer{width:100%;height:100%;position:fixed;top:0;left:0;z-index:99;background:rgba(0,0,0,.5)}
</style>

此时我们打开chrome调试工具的时候我们会发当我们滑动layer层的，里面的滚动不会再滚动了，我们再试着把.prevent给去掉，会发现滚动再次出现，这个原理就是event.preventDefault来阻止默认事件事执行的。
实现原理，我们对layer层把它的touchmove滑动事件给干掉了，就不会触发滚动区域的滑动事件，个人认为这个场景每个项目都会用的到