v-if和v-for-前端黑洞网

本站消息

站长简介/公众号

出租广告位,需要合作请联系站长

前端霸主

1719

文章

1021295

访问

+关注

分类

暂无分类

日期归档

2024-11(9)

v-if和v-for

发布于2021-03-07 22:27 阅读(1602) 评论(0) 点赞(2) 收藏(4)

今天遇到一个很有意思的事情，看下面代码。
有四张美女图片，我用v-for循环出来了。

<style>
    .imgg {
      float: left;
      width: 600px;
      height: 400px;
    }

    img {
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<body>
  <div id="app">
    <div class="imgg" v-for="(item,index) in imgItems">
      <img :src="item" alt="">
    </div>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        imgItems: [
          "http://img.netbian.com/file/2021/0302/small841d674cbdc91d10fe814c1a217c37e81614615655.jpg",
          "http://img.netbian.com/file/2020/1004/small78a1cd19366c205b449afb321b922e3b1601822811.jpg",
          "http://img.netbian.com/file/2020/0914/small125f86647f0c75c770ec5ceaf69c4e551600088074.jpg",
          "http://img.netbian.com/file/2020/1104/smalle27019a72d62df072213619c846bb9f01604500169.jpg"
        ]
      },
      methods: {}
    });
  </script>

在这里插入图片描述
如果我要去前三张图片，可以使用v-if 和 v-for结合使用代码如下

<style>
    .imgg {
      float: left;
      width: 600px;
      height: 400px;
    }

    img {
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<body>
  <div id="app">
    <div class="imgg" v-if="index<3" v-for="(item,index) in imgItems">
      <img :src="item" alt="">
    </div>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        imgItems: [
          "http://img.netbian.com/file/2021/0302/small841d674cbdc91d10fe814c1a217c37e81614615655.jpg",
          "http://img.netbian.com/file/2020/1004/small78a1cd19366c205b449afb321b922e3b1601822811.jpg",
          "http://img.netbian.com/file/2020/0914/small125f86647f0c75c770ec5ceaf69c4e551600088074.jpg",
          "http://img.netbian.com/file/2020/1104/smalle27019a72d62df072213619c846bb9f01604500169.jpg"
        ]
      },
      methods: {}
    });
  </script>

图片效果在这里插入图片描述
这种写法是错误的，v-if 和v-for结合使用，优先渲染 v-for，然后渲染v-if这种情况会加大引擎的消耗。不推荐使用。我也是最近做了一个项目，看到老师使用v-if 和v-for的结合使用。

现在来说解决方案利用computed属性来计算数组的长度。
这里我们巧妙的使用数组的slice方法把最后一个图片路径截取掉。computed里面的方法使用的时候可以不加括号调用。

<style>
    .imgg {
      float: left;
      width: 600px;
      height: 400px;
    }

    img {
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<body>
  <div id="app">
    <div class="imgg" v-for="(item,index) in imgIndexs">
      <img :src="item" alt="">
    </div>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        imgItems: [
          "http://img.netbian.com/file/2021/0302/small841d674cbdc91d10fe814c1a217c37e81614615655.jpg",
          "http://img.netbian.com/file/2020/1004/small78a1cd19366c205b449afb321b922e3b1601822811.jpg",
          "http://img.netbian.com/file/2020/0914/small125f86647f0c75c770ec5ceaf69c4e551600088074.jpg",
          "http://img.netbian.com/file/2020/1104/smalle27019a72d62df072213619c846bb9f01604500169.jpg"
        ]
      },
      methods: {},
      computed: {
        imgIndexs() {
          return this.imgItems.slice(0, 3)
        }
      }
    });
  </script>