vue自定义指令

最新推荐文章于 2023-09-13 14:58:32 发布

ZhandsomeZ

最新推荐文章于 2023-09-13 14:58:32 发布

阅读量1w

点赞数

分类专栏： vue从入门到入坑文章标签： vue 前端 javascript

本文链接：https://blog.csdn.net/handsomezhanghui/article/details/104544149

版权

vue从入门到入坑专栏收录该内容

13 篇文章 0 订阅

订阅专栏

在这里插入图片描述

1. 局部指令，只能在组件内调用

通过directives设置指令
updateText为指令名，element为标签对象，binding为包含指令相关信息数据的对象
updateText(element, binding) {
      element.textContent = binding.value.toUpperCase();//变成大写
},
**通过‘v-’调用**
<h3 v-updateText = "msg">{{msg}}</h3>

2. 全局指令

可以全局调用，指令需要写在main.js里面
Vue.directive("lowerText", function(element, binding) {
  element.textContent = binding.value.toLowerCase();
});
通过‘v-’调用
<h3 v-lowerText="second">{{second}}</h3>