Vue技术点整理-指令
我们通常给一个元素添加 v-if / v-show 来做权限管理,但如果判断条件繁琐且多个地方需要判断,这种方式的代码不仅不优雅而且冗余。
针对这种情况,我们可以通过全局自定义指令来处理:我们先在新建个 array.js 文件,用于存放与权限相关的全局函数;
// array.js
export function checkArray (key) {
let arr = ['1', '2', '3', '4', 'demo']
let index = arr.indexOf(key)
if (index > -1) {
return true // 有权限
} else {
return false // 无权限
}
}
// main.js
import { checkArray } from "./common/array";
Vue.directive("permission", {
inserted (el, binding) {
let permission = binding.value; // 获取到 v-permission的值
if (permission) {
let hasPermission = checkArray(permission);
if (!hasPermission) { // 没有权限 移除Dom元素
el.parentNode && el.parentNode.removeChild(el);
}
}
}
});
最后我们在页面中就可以通过自定义指令 v-permission 来判断:
<div class="btns">
<button v-permission="'1'">权限按钮1</button> // 会显示
<button v-permission="'10'">权限按钮2</button> // 无显示
<button v-permission="'demo'">权限按钮3</button> // 会显示
</div>
Vue技术点整理-指令的更多相关文章
- Vue技术点整理-前言
前言 Vue版本说明:本文档编写时,Vue稳定版本为 2.6.10 本文档编写目的为:整理Vue相关生态的技术点.和开发中经常使用到的技术点,让开发者快速上手开发,提升开发效率 一,Vue开发工具:本 ...
- Vue技术点整理-Vue Router
路由 Vue Router 对于单页面应用来说,如果涉及到多个页面的话,就必须要使用到路由,一般使用官方支持的 vue-router 库 一,Vue Router 在项目中的安装引用 1,在页面中使用 ...
- Vue技术点整理-Vue CLI安装详解
一,脚手架安装 Node 版本要求 Vue CLI 需要 Node.js +).你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本. 1,全局安装Vue CLI ...
- Vue技术点整理-Vue CLI
Vue CLI 是一个基于 Vue.js 进行项目快速开发的脚手架 注:具体安装步骤可参考Vue CLI,默认安装的脚手架,是没有service.util等工具类的,以下主要描述如何在脚手架的基础上进 ...
- Vue技术点整理 vue-devtools
注:默认浏览器调试工具,在调试vue的页面时,是不能看到vue项目的属性状态值的,所以最好是在浏览器上安装 vue-devtools,这样就可以在浏览器里面审查和调试vue的应用了 1,Chrome浏 ...
- Vue技术点整理-安装引入
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架 所谓渐进式是指: 1,如果你有一个现成的web应用,你可以将vue作为该应用的一部分嵌入其中,带来更丰富的交互体验 ...
- Vue技术点整理-vue.config.js
1,proxy代理解决本地开发环境跨域问题 配置proxy代理后,proxy会将任何未知请求 (没有匹配到静态文件的请求) 代理到 https://192.168.3.49:8080 vue.conf ...
- Vue技术点整理-Vuex
什么是Vuex? 1,Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化 2,每一个 Vuex ...
- [转] Web前端开发工程师常用技术网站整理
1.常用工具相关 有道云笔记 http://note.youdao.com/signIn/index.html 36镇-最好用的共享收藏夹 http://www.36zhen.com/ 浏览器同步测试 ...
随机推荐
- 一次失败的java Box居中尝试
效果如下: 通过Box的应该虽然实现了居中,但是页面相当丑!且不能插入JTextField等文本框,总的来说相当失败!!! import javax.swing.Box; import javax.s ...
- Kubernetes官方java客户端之一:准备
欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...
- LVS之3---健康检查
LVS实现健康性检查功能 LVS高可用性 解决方案: 由Director对各RS健康状态进行检查,失败时禁用,成功时启用 keepalived heartbeat/corosync ldirector ...
- [每日一题]面试官问:Async/Await 如何通过同步的方式实现异步?
关注「松宝写代码」,精选好文,每日一题 时间永远是自己的 每分每秒也都是为自己的将来铺垫和增值 作者:saucxs | songEagle 一.前言 2020.12.23 日刚立的 flag,每日一 ...
- 风炫安全Web安全学习第十节课 数字型的Sql注入
数字型的Sql注入 风炫安全Web安全学习第十一节课 字符型和搜索型的sql注入 风炫安全Web安全学习第十二节课 mysql报错函数注入 风炫安全Web安全学习第十三节课 CUD类型的sql注入 风 ...
- docker save 保存导出镜像
Docker保存镜像 tag 镜像 # 镜像打 tag 标签 # docker tag 镜像id/名 新名字 docker tag fce91102e17d tomcat01 commit 镜像 注意 ...
- 【Git】2、Linux快速安装Git环境 & oh-my-zsh
Linux快速安装Git环境 文章目录 Linux快速安装Git环境 1.Linux安装Git 2.安装zsh 3.安装oh-my-zsh 3.1.安装oh-my-zsh 3.2. 测试验证 4.小结 ...
- 【Oracle】10g 11g下载路径
现在直接点击不能下载了 要经过oracle许可才可以下载 如果嫌麻烦可以用迅雷直接下载密码是这个 一般不会动了 大家也不用帮我找回密码了 每次都改 也很麻烦的用迅雷下就不用密码了 下载也不会卡到最后 ...
- os.walk() 遍历目录下的文件夹和文件
os.walk(top, topdown=True, onerror=None, followlinks=False) top:顶级目录 os.walk()返回一个三元tupple(dirpath, ...
- D2Admin 登录用户重新初始话右侧菜单
背景 最近用到D2Admin开发项目,用户登录菜单要根据用户角色权限获取,但是又不想用官网的方案(vue基于d2-admin的RBAC权限管理解决方案),所以自己加了个只修改 menuAside的方案 ...