Vue 自定义指令作用

vue中除了内置的指令外，vue也允许注册自定义指令。
应用场景：根据用户权限的不同在页面中显示不一样的东西。

    <div id="app">
        <button v-permission.admin>删除</button>
        <button >编辑</button>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>

    <script>
        Vue.directive('permission', (el,data)=>{
            // console.log(data.modifiers.admin);//拿到修饰符
            if(data.modifiers.admin){
            //需要管理员才能使用
                if(sessionStorage.getItem('role') !=='admin'){
                    el.style.display = 'none'
                }
            }
            
        })
        new Vue({
            el: '#app', 
            data() {
                return {

                }
            }
        });
        setTimeout(()=>{
            sessionStorage.setItem('role','admin')
        },1000)
    </script>