Vue(10)——自定义指令

自定义指令

自定义指令:可以封装一些dom操作,扩展额外功能。

全局注册-语法:

Vue.directive('指令名',{

"inserted"(el){ inserted指指令所绑定的元素被添加到页面时自动调用

//可以对el标签扩展额外功能

el.focus()

}

})

局部注册-语法:

directives:{

"指令名":{

inserted(){

el.focus()

}

}

}

使用时v-指令名 。


全局注册示例:

局部注册示例:

自定义指令的值

语法:在绑定指令时,可以通过"等号"的形式为指令绑定的具体数值。

<div v-color="color">我是内容</div>

通过binding.value可以拿到指令值指令值修改会触发update函数

directives:{

color:{

inserted(el,binding){

el.style.color = binding.value

},

update(el,binding){

el.style.color = binding.value

}

}

}

复制代码
<template>
  <div>
    <h1 v-color="color1">自定义指令</h1>
    <h1 v-color="color2">自定义指令</h1>
  </div>
</template>

<script>
export default{
  directives:{
    color:{
      inserted(el,binding){
        el.style.color = binding.value
      },
      update(el,binding){
        el.style.color = binding.value
      }
    }
  },
  data(){
    return{
      color1:'red',
      color2:'blue'
    }
  }
}
</script>
相关推荐
DataGear2 分钟前
如何在DataGear 5.4.1 中快速制作SQL服务端分页的数据表格看板
javascript·数据库·sql·信息可视化·数据分析·echarts·数据可视化
影子信息4 分钟前
vue 前端动态导入文件 import.meta.glob
前端·javascript·vue.js
青阳流月5 分钟前
1.vue权衡的艺术
前端·vue.js·开源
RunsenLIu6 分钟前
基于Vue.js + Node.js + MySQL实现的图书销售管理系统
vue.js·mysql·node.js
样子20189 分钟前
Vue3 之dialog弹框简单制作
前端·javascript·vue.js·前端框架·ecmascript
kevin_水滴石穿10 分钟前
Vue 中报错 TypeError: crypto$2.getRandomValues is not a function
前端·javascript·vue.js
翻滚吧键盘11 分钟前
vue文本插值
javascript·vue.js·ecmascript
华子w90892585912 分钟前
基于 SpringBoot+Vue.js+ElementUI 的 “花开富贵“ 花园管理系统设计与实现7000字论文
vue.js·spring boot·elementui
孤水寒月1 小时前
给自己网站增加一个免费的AI助手,纯HTML
前端·人工智能·html
CoderLiu1 小时前
用这个MCP,只给大模型一个figma链接就能直接导出图片,还能自动压缩上传?
前端·llm·mcp