开发者社区开发与运维文章正文

自定义v-color指令

2022-05-11 142

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 自定义v-color指令

在自定义指令的时候，和js行为有关的，最好就写在inserted中去，防止js代码不生效。

和样似有关的操作放在bind中去

Vue.direactive 【d儿 Rai K T V】没有s哈

<body>
    <div id="app">
        <input type="text" value="" v-color="'red'">
        //注意red有单引号和双引号，red变量要使用单引号扩起来哈
    </div>
    <script>
        Vue.directive("color", { //【d儿 Rai K T V】
            bind: function (el, binging) {
                el.style.color = binging.value; //接受颜色
                console.log(binging) //Object {name: "color", rawName: "v-color", value: "red", expression: "'red'",
            },
            inserted: function (el) {
            },
            updated(el) {//[a p dei ti d]
                //当v-model跟新的时候，就会执行这个函数  这个函数会执行多次  
            },
        })
        var vm = new Vue({
            el: "#app",
            data: {
            }
        });
    </script>
</body>