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

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

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>

vue---自定义指令的使用的更多相关文章

  1. vue自定义指令

    Vue自定义指令: Vue.directive('myDr', function (el, binding) { el.onclick =function(){ binding.value(); } ...

  2. vue 自定义指令的使用案例

    参考资料: 1. vue 自定义指令: 2. vue 自定义指令实现 v-loading: v-loading,是 element-ui 组件库中的一个用于数据加载过程中的过渡动画指令,项目中也很少需 ...

  3. vue自定义指令(Directive中的clickoutside.js)的理解

    阅读目录 vue自定义指令clickoutside.js的理解 回到顶部 vue自定义指令clickoutside.js的理解 vue自定义指令请看如下博客: vue自定义指令 一般在需要 DOM 操 ...

  4. Vue自定义指令报错:Failed to resolve directive: xxx

    Vue自定义指令报错 Failed to resolve directive: modle 这个报错有2个原因: 1.指令单词拼错 2.Vue.directive() 这个方法没有写在 new Vue ...

  5. vue自定义指令clickoutside使用以及扩展用法

    vue自定义指令clickoutside使用以及扩展用法 产品使用vue+element作为前端框架.在功能开发过程中,难免遇到使用element的组件没办法满足特殊的业务需要,需要对其进行定制,例如 ...

  6. vue自定义指令clickoutside扩展--多个元素的并集作为inside

    都是个人理解,如果发现错误,恳请大家批评指正,谢谢.还有我说的会比较啰嗦,因为是以自身菜鸡水平的视角来记录学习理解的过程,见谅. 1.前言 产品使用vue+element作为前端框架.在功能开发过程中 ...

  7. 每个人都能实现的vue自定义指令

    前文 先来bb一堆废话哈哈.. 用vue做项目也有一年多了.除了用别人的插件之外.自己也没尝试去封装指令插件之类的东西来用. 刚好最近在项目中遇到一个问题.(快速点击按钮多次触发多次绑定的方法),于是 ...

  8. vue自定义指令,比onerror更优雅的方式实现当图片加载失败时使用默认图,提供三种方法

    首先,来看下效果图(演示一下图片正常加载与加载失败时的效果) 在线体验地址:https://hxkj.vip/demo/vueImgOnerror/ 一.常规方法解决 我们都知道,img标签支持one ...

  9. Vue自定义指令使用场景

    当你第一次接触vue的时候,一定会使用到其中的几个指令,比如:v-if.v-for.v-bind...这些都是vue为我们写好的,用起来相当的爽.如果有些场景不满足,需要我们自己去自定义,那要怎么办呢 ...

  10. Vue自定义指令使用方法详解 和 使用场景

    Vue自定义指令的使用,具体内容如下 1.自定义指令的语法 Vue自定义指令语法如下: Vue.directive(id, definition) 传入的两个参数,id是指指令ID,definitio ...

随机推荐

  1. echarts 饼状图调节 label和labelLine的位置

    原理 使用一个默认颜色为透明的,并且只显示labelLine的饼状图 然后通过调节这个透明的饼状图 以达到修改labelLine的位置 echarts地址 https://gallery.echart ...

  2. QtCreator设置野火iMx6开发板提供的qt交叉编译套件

    在Ubuntu18 QtCreator上添加野火iMx6开发板的Qt交叉编译环境PC:Ubuntu18.04QtCreator: 4.8.2交叉编译环境:野火提供的 5-编译工具链->qt交叉编 ...

  3. 进程间通信之数据传输--FIFO

    One of the fundamental features that makes Linux and other Unices useful is the “pipe”. Pipes allow ...

  4. git及github使用

    1.git安装 widows: 可以去git官网下载安装 ubantu : 使用命令 sudo apt-get install git 进行安装 2.git启动 widows: 首先去到需要建立git ...

  5. 持久化JS存储

    <script src="../../lib/persist-min.js"></script> //测试一下本地化存储器 var store = new ...

  6. Centos7-Gnome安装

    查看grouplist yum grouplist 安装gnome yum groupinstall "GNOME Desktop" root用户权限下,设置centos系统默认的 ...

  7. STM32 IAP程序 源码 和测试代码 有详细的中文注释

    http://bbs.21ic.com/forum.php?mod=viewthread&tid=588265&reltid=624002&pre_pos=2&ext= ...

  8. MySQL Error:Warning: (1366, "Incorrect string value: '\\xF0\\x9F\\x98\\x82\\xF0\\x9F...' for column 'xxx' at row 2")

    bug现象 使用连接数据库的可视化软件插入 emoj 表情数据.生僻字,可以正常插入.(导致我一直以为跟表情没有任何关系,谷歌出来一堆跟修改数据库.表.字段 的编码的结果....)但是一启动程序插入新 ...

  9. 持续集成学习1 gitlab和jenkins安装

    一.gitlab安装参照链接 https://www.cnblogs.com/linuxk/p/10100431.html 二.安装jenkins 1.获取jenkins源码包 https://blo ...

  10. c++处理字符串string.find()与string::npos

    1. string s  = “xxx”; int a = s.find(‘x’); 如果没有匹配到,那么a = string::npos;