v-for和v-if

最新推荐文章于 2024-07-24 12:54:56 发布

一蝉YiChan

最新推荐文章于 2024-07-24 12:54:56 发布

阅读量4.3k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_62677484/article/details/126998471

版权

v-for和v-if的同时使用时的注意事项

不同点

不同点

v-for是条件渲染，v-if是列表渲染；
在同一个标签上，使用这两个关键指令时，由于v-for的优先级高于v-if ,在v-for没次迭代时，也会执行一次v-if，这样耗费更多的计算开销，而影响计算机性能；
特别是对于渲染的范围很小时，便会出现“大材小用”的现象，最好是在数据模型中对列表进行过滤，减少视图的判断。
案例：（注：html文件和vue.js文件处于同级）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="demo">
        <p v-for="item in list" v-bind:key="item.id" v-if="item.id < 3">
          {{item.name}}
        </p>
      </div>
   
   
      <script>
        let demo = new Vue({
          el: '#demo',
          data : {
              name: '',          
              list :[
                { id: 1, name: 'HTML' },
                { id: 2, name: 'CSS' },
                { id: 3, name: 'JavaScript' },
                { id: 4, name: 'Vue' }
              ]
          }
      </script>
</body>

</html>

运行结果：

这里同时使用了v-for和v-if，虽然得到了结果，如果list有大量的数据，而满足条件的确实少数，就会导致还是要遍历整个数组，在性能上也是极度的浪费。
以下提供解决方法，便是开头描述的计算属性，不可以用methods（方法），mehtods是处理点击事件，需要用户交互，不能自动触发，而computed(计算属性）是直接给界面更新值。
优化后：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="demo">
        <p v-for="item in filteredList" v-bind:key="item.id">
          {{item.name}}
        </p>
      </div>
    

      <script>
        let demo = new Vue({
          el: '#demo',
          data : {      
              list :[
                { id: 1, name: 'HTML' },
                { id: 2, name: 'CSS' },
                { id: 3, name: 'JavaScript' },
                { id: 4, name: 'Vue' }
              ]
          },
          computed: {
            filteredList() {
              return this.list.filter(function (item) {
                return item.id < 3
              })
            }
          }
        })
      </script>
</body>
</html>

运行结果：

和前者运行一样，但在性能上有很大差别，此处数据量较小，效果不明显。
如果要同时使用v-if和v-for就不要以同级的形式。
实际案例：

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="./vue.js"></script>
</head>
<body>
  <div id="demo">
    <div v-if="products.length == 0" >没有找到商品！</div>
    <div v-else>
        <p v-for="item in product" :key="item.name">
            名称：{{item.name}}
            价格：{{item.price}}
        </p>
    </div>
 
  </div>

  <script>
    let dem = new Vue({
      el: '#demo',
      data : {
        products :[
                { name: '手机', price: 3000},
                { name: '电脑', price: 7000},
                { name: '平板', price: 6500},
                { name: '电视', price: 8000}
              ]
      },
      computed: {
            product() {
              return this.products.filter(function (item) {
                return item.name,item.price
              })
            }
          }
    })
  </script>
</body>
</html>