自定义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>

巴特西

自定义v-color指令

最新文章

热门文章