程序员最近都爱上了这个网站  程序员们快来瞅瞅吧!  it98k网:it98k.com

本站消息

站长简介/公众号

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


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

v-if和v-for

发布于2021-03-07 22:27     阅读(1450)     评论(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>

原文链接:https://blog.csdn.net/qq_43853213/article/details/114413005




所属网站分类: 技术文章 > 博客

作者:前端霸主

链接:http://www.qianduanheidong.com/blog/article/33564/63c6942accb16559aeea/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

2 0
收藏该文
已收藏

评论内容:(最多支持255个字符)