自定义v-color指令

简介: 自定义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>
相关文章
16avalon - 指令ms-attr(属性绑定)
16avalon - 指令ms-attr(属性绑定)
89 1
|
6月前
|
前端开发 小程序 开发者
小程序的前端 display 有什么类型?
【9月更文挑战第4天】小程序的前端 display 有什么类型?
127 4
|
7月前
Flutter更改主题颜色报错:type ‘Color‘ is not a subtype of type ‘MaterialColor‘
Flutter更改主题颜色报错:type ‘Color‘ is not a subtype of type ‘MaterialColor‘
70 4
|
9月前
|
UED Python
如何使用Pygame的display模块显示文本?
【6月更文挑战第11天】如何使用Pygame的display模块显示文本?
143 6
|
前端开发 JavaScript 容器
display有哪些值?说明他们的作用?
display有哪些值?说明他们的作用?
202 0
21avalon - 指令ms-hover(hover绑定)
21avalon - 指令ms-hover(hover绑定)
58 0
|
10月前
|
安全 Linux
top 命令可以使用的参数都有什么
【4月更文挑战第21天】top 命令可以使用的参数都有什么
105 1
|
索引 Python
[oeasy]python0078_设置索引颜色_index_color_ansi_控制终端颜色
[oeasy]python0078_设置索引颜色_index_color_ansi_控制终端颜色
168 0
[oeasy]python0078_设置索引颜色_index_color_ansi_控制终端颜色
|
Web App开发 前端开发 开发者
1 分钟认识新属性 accent-color —— 修改 input 默认控件颜色
1 分钟认识新属性 accent-color —— 修改 input 默认控件颜色
|
前端开发 JavaScript
【JavaScript】动态修改元素的 background-image
【JavaScript】动态修改元素的 background-image
1021 0

热门文章

最新文章