Vue中自定义指令如何避免与v-if指令产生冲突问题？

本文共计569个文字，预计阅读时间需要3分钟。

目录 + 自定义指令与v-if冲突 + 问题 + 解决 + Vue指令v-for和v-if为什么不能同时使用 + 自定义指令与v-if冲突 + 问题 + 当同时存在v-if和自定义隐藏的指令（后面统一称为v-power） + el会被删除，元素‘‘

目录

• 自定义指令与v-if冲突
• 问题
• 解决
• vue指令v-for和v-if为什么不能同时使用

自定义指令与v-if冲突

问题

当同时存在 v-if 和自定义隐藏的指令（后面统一称为v-power） el 会被删除，单元素上的指令依旧会执行，修改的是上一个元素的显示影藏

解决

第一种方式，将v-if 替换为v-show，这样元素一直存在，就不会出现问题，(如果你的自定义指令会动态改变display属性，那就可能和v-show冲突 v-show是通过display：none来控制影藏，这点需要注意，只是单一的影藏，就不需要考虑了)

第二种方式，将v-if指令合并到自定义中 传入一个对象；

改指令实现通过传入的对象来实现是否需要影藏,

<div v-power="{power:1,vIf:true}"></div>

Vue.directive('power', {   update: function (el, binding, vnode) {     vnode.context.$nextTick(()=>{     const power = [1,2,3,4]     const data  = binding.value // 获取绑定的值     console.log('power',power);     console.log('data',data);         //存在v-if 指令使用，合并指令，         if(data.vIf){           //权限数组中不存在表示影藏           if (!data.power.includes(power)) {             el.style.display = "none"           }         }else{           el.remove() //v-if 为false 删除元素，模拟v-if                    }      })   } })

vue指令v-for和v-if为什么不能同时使用

指令v-for和v-if不建议同时使用

在vue2.x中，v-for优先级是高于v-if的，如果在同一个元素中使用了v-for和v-if，那么在渲染时，v-for的每一项都要重复运行v-if，这会降低渲染的效率

解决方式

可以将v-if的功能替换为 在一个计算属性上面遍历后使用

computed: {   activeUsers: function () {     return this.users.filter(function (user) {       return user.isActive     })   } } <ul>   <li     v-for="user in activeUsers"     :key="user.id"   >     {{ user.name }}   </li> </ul>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。