vue---自定义指令的使用

浅浅的花香味﹌ 2021-12-16 07:03 281阅读 0赞

在vue开发项目中，指令的使用场景也是比较多的，那么该如何定义使用呢？

找到 src / directive 下新建 gender 目录，下面新建 index.js 和 gender.js

![1119605-20190515115121202-1165276955.png][]

index.js

import gender from './gender'
    const install = function(Vue) {
      Vue.directive('gender', gender)
    }
    if (window.Vue) {
      window['gender'] = gender
      Vue.use(install);
    }
    /**
     * [gender 使用方法]
     * <span v-gender>1</span>
     */
    gender.install = install
    export default gender

gender.js

export default {
      bind(el) {
        el.innerHTML = el.innerHTML ? '男' : '女'; 
      }
    }

引入 gender 指令

import gender from '@/directive/gender'

使用指令：

directives: { gender },

具体的使用：

<span v-gender>1</span>

![1119605-20190515115342181-163615246.png][]

转载于:https://www.cnblogs.com/e0yu/p/10868583.html

[1119605-20190515115121202-1165276955.png]: /images/20211214/cd93b9abdd6d43788405e71a6f521dac.png
[1119605-20190515115342181-163615246.png]: /images/20211214/76d87244133c45d799136066fc619c6f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，281人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue自定义指令

自定义指令 vue里面不仅仅有内置的指令，也可以根据自己的需求构建自定义指令它其实就是操作DOM元素的属性以及内容通过directives属性配置自定义指令，有函

浅浅的花香味﹌/ 2023年09月26日 23:00/ 0 赞/ 160 阅读

相关 vue自定义指令

示例：我们注册一个全局的v-focus指令 <div id="app"> <p>页面载入时，input 元素自动获取焦点：</p> <

朱雀/ 2023年03月06日 03:56/ 0 赞/ 243 阅读

相关 vue 指令自定义

<body> <div id="app"> <input type="text" v-focus> <input type=

╰半橙微兮°/ 2023年01月07日 08:51/ 0 赞/ 296 阅读

相关 vue 自定义指令

项目中使用指令的情景是“有无权限” ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

灰太狼/ 2022年11月04日 12:29/ 0 赞/ 267 阅读

相关 vue 自定义指令

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你

男娘i/ 2022年04月03日 04:30/ 0 赞/ 413 阅读

相关 Vue自定义指令

`v-on 、v-model、v-show` 等指令，在操作 dom 时使用了 ref 属性，其实指令也是操作dom 的一种方式，但有时，这些指令并不能满足我们的需求，因此

比眉伴天荒/ 2022年01月29日 02:53/ 0 赞/ 409 阅读

相关 vue---自定义指令的使用

在vue开发项目中，指令的使用场景也是比较多的，那么该如何定义使用呢？找到 src / directive 下新建 gender 目录，下面新建 index.js 和 ge

浅浅的花香味﹌/ 2021年12月16日 07:03/ 0 赞/ 282 阅读

相关 Vue 自定义指令

Vue 自定义指令除了核心功能默认内置的指令 (`v-model` 和 `v-show`)，Vue 也允许注册自定义指令。

待我称王封你为后i/ 2021年12月16日 05:43/ 0 赞/ 461 阅读

相关 vue自定义指令

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。有的情况下，对普通 DOM 元素进行底层操作，这时候就会用到自定义指令下面

布满荆棘的人生/ 2021年09月02日 06:07/ 0 赞/ 544 阅读

相关 vue 自定义指令

自定义指令: 1、全局指令: (1)创建 Vue.directive('名称',{ 钩子函数:function(el,

曾经终败给现在/ 2021年07月24日 18:28/ 0 赞/ 660 阅读