自定义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(属性绑定)
70 1
|
2月前
|
前端开发
前端基础(十二)_overflow属性、clear属性、vertical-align属性
本文详细介绍了CSS中的overflow属性、clear属性和vertical-align属性的用法和效果,并通过实例展示了如何控制元素内容溢出时的显示方式、清除浮动以及对齐行内元素和行内块元素。
66 1
|
2月前
|
前端开发 小程序 开发者
小程序的前端 display 有什么类型?
【9月更文挑战第4天】小程序的前端 display 有什么类型?
67 4
21avalon - 指令ms-hover(hover绑定)
21avalon - 指令ms-hover(hover绑定)
45 0
|
前端开发 JavaScript 容器
display有哪些值?说明他们的作用?
display有哪些值?说明他们的作用?
123 0
|
搜索推荐 前端开发 JavaScript
meta标签有哪些属性和属性值?li设为行内块时有间隙怎么办?call、apply和bind的作用和区别?
`meta`标签可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。`meta`标签位于文档的头部,不包含任何内容。`meta`标签的属性定义了与文档相关联的名称/值对。
|
Web App开发 前端开发 开发者
1 分钟认识新属性 accent-color —— 修改 input 默认控件颜色
1 分钟认识新属性 accent-color —— 修改 input 默认控件颜色
|
前端开发 IDE 开发工具
「趣学前端」box-shadow的多重用法
用技术实现梦想,用梦想打开创意之门。分享CSS中box-shadow的多重用法。
268 0
|
前端开发 JavaScript 数据库
实现一个 Code Pen:(一)项目初始化
前段时间掘金上线了一个新功能 Code pen,可以在线写代码,笔者对这种在线实时编辑的功能充满了好奇,所以打算开发一个简易的 Code pen。
166 0
fbh
less学习——Color 函数
LESS 提供了一系列的颜色运算函数. 颜色会先被转化成 HSL 色彩空间, 然后在通道级别操作: lighten(@color, 10%); // return a color which is 10% *li...
fbh
1365 0