v-if与v-for结合使用——v-for 的优先级比 v-if 更高，先遍历再判断 & 影响性能，不推荐使用

最新推荐文章于 2024-07-19 10:04:44 发布

viceen

最新推荐文章于 2024-07-19 10:04:44 发布

阅读量254

点赞数

分类专栏：面试类 vue知识文章标签： vue

本文链接：https://blog.csdn.net/weixin_44867717/article/details/110493974

版权

vue知识同时被 2 个专栏收录

115 篇文章 9 订阅

订阅专栏

面试类

8 篇文章 0 订阅

订阅专栏

v-if与v-for结合使用——v-for 的优先级比 v-if 更高，先遍历再判断 & 影响性能，不推荐使用

官方文档说明：v-for-与-v-if-一同使用

结论：v-for 与 v-if 一同使用，v-for 的优先级比 v-if 更高，先遍历再判断

不推荐使用，影响性能

实例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <!-- 第一种：正常遍历 -->
    <ul>
      <li v-for='item in list'>{{item}}</li>
    </ul>
    <!-- 第二种：v-for 与 v-if 一同使用，v-for 的优先级比 v-if 更高 -->
    <ul>
      <li v-if='index>0' v-for='(item, index) in list'>{{item}}</li>
    </ul>
    <!-- 第三种：用计算属性处理后，再进行遍历 -->
    <ul>
      <li v-for='(item, index) in listData'>{{item}}</li>
    </ul>
  </div>
  <script type="text/javascript" src="./vue.js"></script>
  <script type="text/javascript">
    new Vue({
      el: '#app',
      data: {
        list: ['apple', 'orange', 'lemon']
      },
      computed: {
        listData: function () {
          // 过滤出我们需要的数据
          let data = this.list.filter((item, index) => {
            return index > 0;
          })
          return data;
        }
      }
    })
  </script>
</body>
</html>