vue.js自定义指令

除了使用默认的vue核心指令,如v-model, v-bind等,我们还可以自定义指令,封装常用的功能。

如:实现input框自动获得焦点,且与之双向绑定的数据显示颜色为红色

自定义指令.gif

具体代码

代码解析:

全局自定义指令

// 自定义全局指令
Vue.directive('focus', {
    inserted: function (el) {
        el.focus();
    }
});

html中调用自定义指令focus

<input type="text" class="form-control" v-model="msg" v-focus>

自定义私有指令

let vm = new Vue({
    el: "#app",
    data: {
        msg: '',
    },
    directives: { // 自定义私有指令
        color: function (el, binding) {
            el.style.color = binding.value
        }
    }
})

调用私有指令color

<h3 v-color="'red'">{{ msg }}</h3>

自定义指令

如想了解更多的vue实例,请查阅我的vue笔记目录

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏小筱月

script 标签的属性、事件的探究

有 async 没有 defer 时,会与渲染后续文档元素并行加载(加载过程不会阻塞 dom 解析),加载完自动执行(执行会阻塞 dom 解析)

2092
来自专栏BeJavaGod

FreeMarker静态模板结合spring展示

freemarker可以脱离web使用 前一篇文章使用了普通的方法 这回说说结合spring pom额外引入这个jar包 <groupId>org.spring...

2856
来自专栏高爽的专栏

oncopy和onpaste

       在Javascript中,有相应的事件可以监听复制和粘贴,那就是oncopy和onpaste。        oncopy: demo: <bo...

2340
来自专栏Sublime

Sublime3 的使用

750
来自专栏Spring相关

动态加载布局的技巧

1.在res下面新建一个layout-large的文件夹,下面建一个activity_main.xml:

1134
来自专栏Ryan Miao

使用git提交中删除idea

https://segmentfault.com/q/1010000000720031 http://www.tuicool.com/articles/a6Nf...

6336
来自专栏C/C++基础

Linux命令(20)——cat命令

(4)把 textfile1 的文档内容加上行号后输入 textfile2 这个文档里。

833
来自专栏ionic3+

Cordova插件扩展——Themeablebrowser自拷贝图片

插件全名叫: cordova-plugin-themeablebrowser 这个插件会弹出一个浏览器窗口,打开外部网页,功能比较强大,能自定义导航工具栏、...

1375
来自专栏贺贺的前端工程师之路

如何使用chrome浏览器调试?

在chrome浏览器中打开http://localhost:3000,按F12,或者右击->单击【检查】.

982
来自专栏运维小白

8.5 输入输出重定向

大于号,重定向 > 正确输出 >> 追加重定向 2> 错误重定向 2>> 错误追加重定向 >+2>等于&> 表示结合了正确和错误 cat 1.t...

1967

扫码关注云+社区

领取腾讯云代金券