Vue根据权限获取页面按钮显示与隐藏例如后台有返回数据，插件名称是hasBtn.js。如下所示：
export function hasBtn(val) {
var array= [{ btns: [{id: 1,btn: 'resBtn1'}], hobby: '1', mj: '12' },
{ btns: [{id:2, btn: 'resBtns'}], hobby: '2', mj: '13' }]
let myBtns = [] // 存放array数组里面的btns
let resList = [] //最终返回的数据
for (let item of array) {
if (item.btns && item.btns.length >0) {
myBtns.push(...item.btns)
}
}
console.log(myBtns)
if (myBtns && myBtns.length > 0) {
for (let btns of myBtns) {
if (btns.btn) {
resList.push(btns)
}
}
return resList.indexOf(val)> -1
} else {
return false
}
}
myBtns的打印结果可以去前端教程的地址www.qianduan.cn/web-171-7.h…:
第二步：我们需要在vue项目中的main.js引入我们封装的组件
我们的hasBtn.js在src下面的common文件夹下存放
import {hasBtn} from '@/common/hasBtn.js'
Vue.prototype.hasBtn = hasBtn
第三步：在需要使用的界面使用v-if='hasBtn('resBtn1')'
resBtn1是刚才数组中btns里面的一个按钮编号，具体的以项目返回数据为准 本文由前端教程原创，转载请带上地址:www.qianduan.cn/code-id-245…
