vue关于自定义指令与v-if冲突的问题

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

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on

    Vue.js的指令是以v-开头的,它们作用于HTML元素,指令提供了一些特殊的特性,将指令绑定在元素上时,指令会为绑定的目标元素添加一些特殊的行为,我们可以将指令看作特殊的HTML特性(attribute). Vue.js提供了一些常用的内置指令,如下: v-if指令 v-for指令 v-show指令 v-else指令 v-bind指令 v-on指令 1:v-if指令 v-if指令是条件渲染指令,它根据表达式的真假来删除和插入元素,它的基本语法如下: v-if="expression"

  • 解决v-if 与 v-for 同时使用报错的问题

    在进行项目开发的时候因为在一个标签上同时使用了v-for和v-if两个指令导致的报错. 报错代码如下: <el-input  type="textarea" :autosize="{ minRows: 2, maxRows: 8}" v-for="Oitem in Object.keys(cItem)" :key="Oitem" v-if="Oitem !== 'title'" v-model=&qu

  • 详解为什么Vue中的v-if和v-for不建议一起用

    详解为什么Vue中的v-if和v-for不建议一起用

    本文主要介绍了为什么v-if和v-for不建议一起用?分享给大家,具体如下: 一.作用 v-if 指令用于条件性地渲染一块内容.这块内容只会在指令的表达式返回 true值的时候被渲染 v-for 指令基于一个数组来渲染一个列表.v-for 指令需要使用 item in items 形式的特殊语法,其中 items 是源数据数组或者对象,而 item 则是被迭代的数组元素的别名 在 v-for 的时候,建议设置key值,并且保证每个key值是独一无二的,这便于diff算法进行优化 两者在用法上 <

  • Vue 3自定义指令开发的相关总结

    Vue 3自定义指令开发的相关总结

    什么是指令(directive) 在Angular和Vue中都有Directive的概念,我们通常讲Directive 翻译为"指令". 在计算机技术中,指令是由指令集架构定义的单个的CPU操作.在更广泛的意义上,"指令"可以是任何可执行程序的元素的表述,例如字节码. 那么在前端框架Vue中"指令"到底是什么,他有什么作用呢? 在Vue开发中我们在模板中经常会使用v-model和v-show等以v-开头的关键字,这些关键字就是Vue框架内置的指令

  • vue 中自定义指令改变data中的值

    通过局部自定义指令实现了一个拖动的指令 html: <div style="position:absolute;width:100px;height:100px;border:1px solid red" v-drag="{set:set}"></div> script: methods:{ set(x,y){ this.data.x=x; this.data.y=y; } }, directives:{ // 拖动的自定义指令 drag(e

  • Vue.js自定义指令的用法与实例解析

    Vue.js自定义指令的用法与实例解析

    市面上大多数关于Vue.js自定义指令的文章都在讲语法,很少讲实际的应用场景和用例,以致于即便明白了怎么写,也不知道怎么用.本文不讲语法,就讲自定义指令的用法. 自定义指令是用来操作DOM的.尽管Vue推崇数据驱动视图的理念,但并非所有情况都适合数据驱动.自定义指令就是一种有效的补充和扩展,不仅可用于定义任何的DOM操作,并且是可复用的. 比如谷歌图片的加载做得非常优雅,在图片未完成加载前,用随机的背景色占位,图片加载完成后才直接渲染出来.用自定义指令可以非常方便的实现这个功能. 效果: 自定义

  • Vue.directive 自定义指令的问题小结

    1.今天复习一下Vue自定义指令的代码,结果出现一个很无语的结果,先贴代码. 2. <div id="example" v-change-by="myColor"></div> <script src="vue.min.js"></script> <script> new Vue({ el:"#example", data:{ msg:"", my

  • 详解Vue.directive 自定义指令

    一.什么是全局API? 全局API并不在构造器里,而是先声明全局变量或者直接在Vue上定义一些新功能,Vue内置了一些全局API,比如我们今天要学习的指令Vue.directive.说的简单些就是,在构造器外部用Vue提供给我们的API函数来定义新的功能. 二.Vue.directive自定义指令 我们在第一季就学习了内部指令,我们也可以定义一些属于自己的指令,比如我们要定义一个v-jspang的指令,作用就是让文字变成绿色. 在自定义指令前我们写一个小功能,在页面上有一个数字为10,数字的下面

  • vue 使用自定义指令实现表单校验的方法

    笔者近期在公司的项目中使用自定义指令完成了表单校验. 这里将思路分享给大家,并写了一个小demo.这个自定义指令还需要大家自行完善. demo可见Github:vue-form-param-check 首先关于自定义指令的介绍可以参考官网. 首先,在github上已经有了一些开源组件可以支持表单校验.但是对于一些小项目而言,引入一个很大的东西实际上并不好.所以这里利用vue的自定义指令对表单校验进行了简单的实现. 分析 在平时我们所见的表单中,常见的做法有2种: - input框输入时和提交时,

  • Vue使用自定义指令实现拖拽行为实例分析

    本文实例讲述了Vue使用自定义指令实现拖拽行为.分享给大家供大家参考,具体如下: 需求 通过自定义指令的方式实现拖拽效果,预期的使用方式为: <div style="background: #f00; width: 200px; height: 200px;" v-drag> XXXX </div> 更重要的一个需求点: 拖拽元素内部的子元素可以自行阻止拖拽行为 比如: <div style="background: #f00; width: 2

  • vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)

    vue项目开发的过程中,如果需要文字溢出的dom元素鼠标悬浮时才显示title文字的话,可以封装一个自定义的指令. 方法一. 组件内代码如下: directives: { title: { inserted(el) { const { clientWidth, scrollWidth, title } = el; if (!title && scrollWidth > clientWidth) el.title = el.innerText; } } }, 使用: <artic

  • Vue使用自定义指令实现页面底部加水印

    Vue使用自定义指令实现页面底部加水印

    项目场景 给项目的整个背景加上自定义水印,可以改变水印的文案和字体颜色等 实现思路 这里使用的技术主要是canvas,在实现水印的过程中,主要使用了canvas的特性 使用 canvas 特性生成 base64 格式的图片文件,然后设置其字体大小,颜色等 最后将其设置为背景图片,这就实现了页面的水印效果 实现效果 实现代码 <template> <div class="water-marker" > <div v-waterMarker="{te

  • Vue全局自定义指令Modal拖拽的实践

    Vue全局自定义指令Modal拖拽的实践

    目录 背景 实现思路 实现效果 背景 最近一直在做的项目是Vue2搭建的项目,UI框架用的antdV,项目中用到了很多Modal对话框,然后突然有一天产品说:"这个对话框为什么不能移动啊,挡住我看信息了",那没办法,有需求就得做,这就是新生代打工人. 首先我去antdV官网看Modal的配置属性和方法,看看有没有这方面的属性或者方法可以直接解决,无奈没有找到.第二步开始问百度,相关的博客也有一些,但是总的来说五花八门,不是特别好搞懂,然后发现有个使用全局自定义指定的方式好像有点意思,然

随机推荐