Vue自定义指令

最新推荐文章于 2024-03-15 14:49:11 发布

原创最新推荐文章于 2024-03-15 14:49:11 发布 · 294 阅读

0 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

14 篇文章

订阅专栏

v-on 、v-model、v-show 等指令，在操作 dom 时使用了 ref 属性，其实指令也是操作dom 的一种方式，但有时，这些指令并不能满足我们的需求，因此 vue 允许我们自定义指令来操作 dom

<body>
    <div id="app">
        <p v-color>123131321</p>
    </div>
</body>
<script>
    //全局指令
    //    Vue.directive("color",{
    //        inserted:function(el){
    //             el.style.background="red";
    //        }
    //    });
       var app=new Vue({
           el:"#app",
           directives:{
               color:{
                   inserted:function(el){
                      el.style.background="green";
                   }
               }
           }
       });
</script>