Vue.js的自定义指令 directive

这次给大家带来vue.js的自定义指令 directive,使用vue.js的自定义指令directive的注意事项有哪些,下面就是实战案例,一起来看一下。

以自定义v-css指令为例:

局部指令

  export default {    //自定义v-css指令    directives: {      css: {        inserted (el, bind) {          let styleObj = bind.value          let arr = []          for (let key in styleObj) {            arr.push(key + ':' + styleObj[key])          }          arr = arr.join(';')          el.style.cssText = arr        }      }    }

登录后复制

全局指令
在main.js文件中自定义全局的指令

Vue.directive('css', {  inserted (el, binding) {    let styleObj = binding.value    let arr = []    for (let key in styleObj) {      arr.push(key + ':' + styleObj[key])    }    arr = arr.join(';')    el.style.cssText = arr  }})

登录后复制

使用自定义指令

立即学习“前端免费学习笔记(深入)”;

我是p标签

登录后复制

1.png

相信看了本文案例你已经掌握了方法,更多精彩请关注【创想鸟】其它相关文章!

推荐阅读:

Vue.js的计算属性和数据监听

Vue.js的事件绑定 – 内置事件绑定、自定义事件绑定

Vue.js的列表渲染 v-for 数组 对象 子组件

以上就是Vue.js的自定义指令 directive的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2783473.html

(0)
上一篇 2025年3月8日 16:50:31
下一篇 2025年2月26日 16:18:09

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • Vue.js的插件

    这次给大家带来vue.js的插件,使用vue.js的插件的注意事项有哪些,下面就是实战案例,一起来看一下。 导入插件(以vue-router为例)执行命令:npm install vue-router –save 如果某个插件需…

    2025年3月8日
    200
  • Vue.js的单位件组件

    这次给大家带来vue.js的单位件组件,使用vue.js单位件组件的注意事项有哪些,下面就是实战案例,一起来看一下。 scoped:局部的如果没有用scoped,那么该样式就会泄漏致全局(所有引入该组件的父组件都会引入这样的样式) 可以根据…

    编程技术 2025年3月8日
    200
  • Vue.js如何设置路由

    这次给大家带来Vue.js如何设置路由,Vue.js设置路由的注意事项有哪些,下面就是实战案例,一起来看一下。 ① 路由map 在main.js中导入vue-router import VRouter from ‘vue-rou…

    2025年3月8日
    200
  • Vue.js的路由参数

    这次给大家带来vue.js的路由参数,使用vue.js的路由参数的注意事项有哪些,下面就是实战案例,一起来看一下。 作用:为页面传递路由参数. 在路由映射表中配置需要传递的参数:比如:apple页面,我需要传递一个color的参数,可以在p…

    2025年3月8日
    200
  • Vue.js的嵌套路由(子路由)

    这次给大家带来vue.js的嵌套路由(子路由),使用vue.js嵌套路由(子路由)的注意事项有哪些,下面就是实战案例,一起来看一下。 children嵌套路由,子路由插入到了父组件apple中 let router = new VRoute…

    2025年3月8日
    200
  • Vue.js路由的其他操作

    这次给大家带来vue.js路由的其他操作,使用vue.js路由其他操作的注意事项有哪些,下面就是实战案例,一起来看一下。 基于当前路径下,跳转到apple    to apple    上面的和下面的区别    to banana 登录后复…

    编程技术 2025年3月8日
    200
  • Vue.js的路由命名和命名视图

    这次给大家带来vue.js的路由命名和命名视图,vue.js路由命名和命名视图的注意事项有哪些,下面就是实战案例,一起来看一下。 路由命名我们可以在设置路由时,给设一个name属性,导航过程中直接:to=”{name: &#82…

    编程技术 2025年3月8日
    200
  • Vue.js路由的重定向

    这次给大家带来vue.js路由的重定向,使用vue.js路由重定向的注意事项有哪些,下面就是实战案例,一起来看一下。 redirect初始化路由时设置 let router = new VRouter({ // 如果mode设为histor…

    2025年3月8日
    200
  • js关于正则表达式运用实例

    本文主要和大家分享js关于正则表达式运用实例,希望能帮助到大家。工具 regexper/.com正则工具 (在国内可能有些慢),我们可以尝试安装 源码在github上。 2006/02/03test/07/sd2016/05/101997-…

    2025年3月8日 编程技术
    200
  • Vue.js使用过渡动画制作路由跳转动画

    这次给大家带来vue.js使用过渡动画制作路由跳转动画,vue.js使用过渡动画制作路由跳转动画的注意事项有哪些,下面就是实战案例,一起来看一下。 keep-live :切换过的视图会被缓存起来,如果不加keep-live 每次都会去重新请…

    2025年3月8日
    200

发表回复

登录后才能评论