Vue自定义指令

最新推荐文章于 2025-03-31 14:56:35 发布

MikazukiMo

最新推荐文章于 2025-03-31 14:56:35 发布

阅读量160

点赞数

分类专栏：学习

本文链接：https://blog.youkuaiyun.com/MikazukiMo/article/details/105751891

版权

学习专栏收录该内容

28 篇文章

订阅专栏

官方文档:
https://cn.vuejs.org/v2/guide/custom-directive.html
全局指令

<body>
    <div id="app">
        <input type="text" v-focus>
        <input type="text" v-bcolor="{bcolor:'aqua'}">
    </div>
</body>
<script>
    Vue.directive("focus", {
        inserted: function (el) {
            el.focus();
        }
    });
    Vue.directive("bcolor", {
        inserted: function (el, binding) {
            el.style.backgroundColor = binding.value.bcolor;
        }
    })
    var vm = new Vue({
        el: "#app"
    })
</script>

局部指令

<body>
    <div id="app">
        <input type="text" v-focus>
    </div>
</body>
<script>
    var vm = new Vue({
        el: "#app",
        directives: {
            focus: {
                inserted: function (el) {
                    el.focus();
                }
            }
        }
    });
</script>