在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. 数据库与数据仓库的区别实际讲的是OLTP与OLAP的区别

    什么是数据仓库 数据仓库,英文名称为Data Warehouse,可简写为DW或DWH.数据仓库,是为企业所有级别的决策制定过程,提供所有类型数据支持的战略集合.它出于分析性报告和决策支持目的而创建. ...

  2. Maven nexus 安装nexus : wrapper | OpenSCManager failed - 拒绝访问。 (0x5)

    在win7中安装nexus时提示:wrapper | OpenSCManager failed - 拒绝访问. (0x5) 主要是没有权限.需要以管理员的身份运行 如果你是直接点击 start-nex ...

  3. tomcat redis session共享

    编译redis所需要的序列化包 安装 gradle Linux & MacOS users Configure your PATH environment variable to includ ...

  4. SQL进阶系列之4HAVING字句的力量

    写在前面 SQL是面向集合的语言,与面向过程和面向对象语言都不一样 寻找缺失的编号 /* 寻找缺失的编号 */ CREATE TABLE SeqTbl (seq INTEGER PRIMARY KEY ...

  5. ThinkPHP支持的4种路由模式

    下面这个说法和示例,比较具有总结性.

  6. UVA - 12183 :Top Secret(N^2的循环矩阵乘法)

    pro:N个数排成一圈.一次操作为,每个位置的数+=L*左+R*右,保留x为整数. 问S轮操作后每个位置的值. N<=1000,S<=2^30,x<=9 . sol:不难想到矩阵乘法 ...

  7. AspxGridView行为:分页、分组、排序、过滤、锁定列

    HTML页面 <dx:ASPxGridView ID="grvList" Width="100%" runat="server" Au ...

  8. PHP——仿造微信OpenId

    前言 这就是拿来玩的,其次假的就是假的,成不了真的! 代码 首先我观察了两个公众号关注后的生成openid的规则,发现了以下规则 1. OpenID都是28位 2. 前六位是有规律的 然后接下来就按着 ...

  9. MySQL之自连接

    自连接就是说,在同一个表中,看做是两个表,下表表示 找每个人的领导,如果没有领导,显示无领导,eid 对应 leaderid,请看员工表 mysql> select * from emp; +- ...

  10. JAVA项目部署(1)

    之前小菜觉得项目发布啊部署可难了,今个儿小菜接有幸触了一下java项目的打包和部署,没上手前觉得可高大上了,可难了,小菜这人就是做没做过的事前特别喜欢自己吓唬自己,这个习惯不好,得改!其实自己真正动手 ...