自定义指令与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>

以上为个人经验,希望能给大家一个参考,也希望大家多多支持阿兔在线工具。

点赞(0)

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部