vue关于自定义指令与v-if冲突的问题
更新时间：2022年08月15日 11:02:37 作者：MmM豆
这篇文章主要介绍了vue关于自定义指令与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>以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了requirejs + vue 项目搭建详解,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
这篇文章主要介绍了vuex状态管理数据状态查询与更改方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了vue中实现多页面应用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
最近接到一个新的需求，要求将系统的用户进行分类，用户登陆后根据不同的用户权限展示不同的功能列表。这篇文章主要介绍了vuex根据不同的用户权限展示不同的路由列表,需要的朋友可以参考下2019-09-09
这篇文章主要为大家详细解析了vue.js数据双向绑定原理，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
这篇文章主要为大家详细介绍了Vue实现简单购物车小案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
今天小编就为大家带来一篇axios取消请求的实践记录分享，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了vue如何动态修改meta的title，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
这篇文章主要介绍了vue-content-loader内容加载器的使用方法,本文分步骤给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2018-08-08
这篇文章主要给大家介绍了关于vue中利用prop进行父子通信时的注意事项,文中通过实例介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2022-01-01
最新评论