专栏首页eadelavue--自定义指令

vue--自定义指令

[自定义指令]:https://cn.vuejs.org/v2/guide/custom-directive.html

  1. 自定义全局和局部的 自定义指令:
​
    // 自定义全局指令 v-focus,为绑定的元素自动获取焦点:
​
    Vue.directive('focus', {
​
      inserted: function (el) { // inserted 表示被绑定元素插入父节点时调用
​
        el.focus();
​
      }
​
    });
​
​
​
    // 自定义局部指令 v-color 和 v-font-weight,为绑定的元素设置指定的字体颜色 和 字体粗细:
​
      directives: {
​
        color: { // 为元素设置指定的字体颜色
​
          bind(el, binding) {
​
            el.style.color = binding.value;
​
          }
​
        },
​
        'font-weight': function (el, binding2) { // 自定义指令的简写形式,等同于定义了 bind 和 update 两个钩子函数
​
          el.style.fontWeight = binding2.value;
​
        }
​
      }
​
  1. 自定义指令的使用方式:
​
<input type="text" v-model="searchName" v-focus v-color="'red'" v-font-weight="900">
​

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • docker--docker 网络管理

    Docker中默认的三种网络分别为bridge、host和none,其中名为bridge的网络就是默认 的bridge驱动网络,也是容器创建时默认的网络管理方式...

    eadela
  • out.write()和out.print()区别,jsp注释区别

    我们现在已经知道JSP是需要先编译成.java,再编译成.class的。其中<%-- ... --%>中的内容在JSP编译成.java时会被忽略的,即JSP注释...

    eadela
  • oracle--用户区别sys和system

    2.如果在同一主机上使用IPC连接到数据库使用操作系统授权,登录任何一个用户都可以拥有as sysdba和as sysoper。

    eadela
  • AI进了直播间,这画风666

    科技时代,我们更加怀念温暖邂逅的时光 这一次IBMWatson为大家带来了Spotify 全球榜 Top 2 的单曲,Watson 学习了 26000 首流行歌...

    企鹅号小编
  • 如何高效?

    之前写过的文章:《如何做一个高效的前端》 获得了不少喜欢。本文侧重讲 如何高效 的方法论。

    前端GoGoGo
  • Python中根据时间自动创建文件夹

    青阳
  • python移动文件,将一个文件夹里面的文件移动到另一个文件夹

    青阳
  • 学习Java基础知识,打通面试关~十二乐观锁与悲观锁

    用户2196435
  • python-numpy

    Dean0731
  • 真香!Python十大文件骚操作!!

    日常对于批量处理文件的需求非常多,用Python写脚本可以非常方便地实现,但在这过程中难免会和文件打交道,第一次做会有很多文件的操作无从下手,只能找度娘。

    Sam Gor

扫码关注云+社区

领取腾讯云代金券