2.x 版本中在一个元素上同时使用 v-if 和 v-for 时， v-for 会优先作用。

3.x 语法

3.x 版本中 v-if 总是优先于 v-for 生效。

由于语法上存在歧义，建议避免在同一元素上同时使用两者。

Vue2.x中一起使用

因为这样的做法会渲染多余元素，在执行v-for时，isActive为false的元素也会被渲染，然后再根据v-if语法去隐藏。当数据量大时，这显然是个不好的做法。

建议如下做法：

<template>
  <div class="about">
      <li v-for="item in filterList" :key="item.num">
        {{item.num}}
  </div>
</template>
<script>
export default {
  data(){
   return{
      list:[
        {isActive:true,num:1},
        {isActive:false,num:2},
        {isActive:true,num:3},
        {isActive:false,num:4},
        {isActive:true,num:5},
  computed:{
    filterList(){
      return this.list.filter((item)=>{
        return item.isActive===true
</script>
Vue3.x中一起使用
<template>
  <div class="hello">
      <li v-for="item in list" :key="item.num" v-if="item.isActive">
        {{item.num}}
  </div>
</template>
// 无法正常渲染：Property "item" was accessed during render but is not defined on instance. 
因为当它们处于同一节点，`v-if` 的优先级比 `v-for` 更高，这意味着 `v-if` 将没有权限访问 `v-for` 里的变量；
可以这样做：
<template>
      <template v-for="item in list" >
        <li v-if="item.isActive" :key="item.num">
          {{item.num}}
      </template>
  </div>
</template>
//将v-for提升一层
但是还是推荐使用计算属性进行过滤，更优雅，没有语义化错误。
比起在模板层面管理相关逻辑，更好的办法是通过创建计算属性筛选出列表，并以此创建可见元素。
        JetTsang
        Vue.js
       
   v-for比v-if优先级更高？面试官:回去等通知吧




    
 
v-if和v-for哪个优先级更高呢？这是面试官常常问到的一个问题，如果是在三年前，我会毫不犹豫的回答v-for
 
 4.6w
 
 
        Vue.js
      
 
   Vue性能优化篇之为什么v-if和v-for不能同时使用？
 
文章深度解析为什么v-for不能和v-if写在一起，并且为解决此类问题在不同情况下提供两种不同解决方案。
 
 5432
 
 
        zencode
        Vue.js
      
 
   从源码解惑，为什么v-if和v-for不应该一起用？
 
这个操作看起来很简单，就是过滤要展示的列表，但是官方是不推荐这么写的，官方链接。 官方给出了两点原因： 哪怕我们只渲染出一小部分用户的元素，也得在每次重渲染的时候遍历整个列表，不论活跃用户是否发生了变化。 通过上文的描述，大概是懂了，嗯。。。但是看完还是不知所以然。 我们可以做…
 
 8665
 
 
        前端小同学
        Vue.js
      
 
    v-for 和 v-if哪个优先级更高
 
本篇文章主要是关于vue基础知识的，从实际例子和源码讲解v-for和v-if的优先级，相信你看完后会茅塞顿开的。
 
 4506
 





    
 
        Vue.js
      
 
   vue中为什么不建议v-if 和v-for一起使用？
 
一、作用 v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true值的时候被渲染 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in item
 
 3180
 
 
        JavaScript
        Vue.js
      
 
   vue中v-for和v-if可以一起使用吗？
 
v-if和v-for同时出现的场景可以拆分为，数据在渲染之前借助生命周期进行处理，也可通过计算属性的方式进行处理。
 
 1970
 
 
        Vue.js
        JavaScript
      
 
   Vue3的v-if 和v-for优先级详解
 
在vue2中应尽量避免二者同时使用 vue 2.x官方链接 那么,我们举个例子说明为啥不推荐 它实际经过的运算是这样的 因此哪怕我们只渲染出一小部分的元素，也得在每次重渲染的时候遍历整个列表
 
 5178
 
 
        MicKing
        Vue.js
      
 
   v-if和v-for的优先级是什么？为什么不建议同时使用
 
v-if和v-for的优先级是什么 v-for比v-if优先级高，所以使用的话，每次v-for都会执行v-if,造成不必要的计算，影响性能，尤其是当之需要渲染很小一部分的时候。 vue中v-if和v-
 
 1935
 
 
        JavaScript
      
 
   面试官问我按钮级别权限怎么控制，我说v-if，面试官说再见
 
最近的面试中有一个面试官问我按钮级别的权限怎么控制，我说直接v-if啊，他说不够好，我说我们项目中按钮级别的权限控制情况不多，所以v-if就够了，他说不够通用，最后他对我的评价是做过很多东西，但是都不
 
 17.3w
 





    
 
        攻城狮_老李
        Vue.js
      
 
   vue2和vue3的v-if与v-for优先级对比学习
 
Vue.js 中使用最多的两个指令就是 v-if 和 v-for，因此我们可能会想要同时使用它们。虽然官方不建议这样做，但有时确实是必须的，我们来了解下他们的工作方式： 在 vue 2.x 中，在一个元素上同时使用 v-if 和 v-for 时，v-for 会优先作用。 在 v…
 
 8179
 
 
        pigman
      
 
   v-if和v-for的优先级是什么？
 
一、作用 v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true值的时候被渲染 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in item
 
 2502
 
 
        涂涂图图兔
        Vue.js
      
 
   v-for和v-if优先级
 
从 vue2 和 vue3 编译结果差异性了解 v-for 和 v-if 优先级 【v-for， v-if】
 
 473
 
 
        用户2112002312727
        Vue.js
      
 
   vue2中v-if和v-for同时出现执行先后问题
 
今天在网上无意间看到一个面试题目，在vue中，如果v-if和v-for同时出现在一个node节点中，会怎么渲染，哪个的优先级更高？ 查看template渲染模板，我们可以看到v-for和v-if同时存
 
 701
 
 
        Vue.js
      
 
   [Vue源码]为什么v-for的优先级比v-if的高？
 
有时候有些面试中经常会问到v-for与v-if谁的优先级高，这里就通过分析源码去解答一下这个问题。 下面的内容是在 当我们谈及v-model，我们在讨论什么?的基础上分析的，所以阅读下面内容之前可先看这篇文章。 我们再次顺着这三个步骤对上述例子进行分析。 parse过程中，会对…
 
 5055
 
 
    challenger
       
 
 关注  
私信