v-for 循环,v-for控制循环次数

  v-for 循环,v-for控制循环次数

  本文主要介绍了编写更好的v-for循环的六个技巧,有助于你更好的理解和使用vue框架。感兴趣的朋友可以了解一下。

  在Vue.js中,v-for循环是每个项目都会用到的东西。它允许你用模板代码写for循环。

  在最基本的用法中,它们的用法如下。

  保险商实验所

  李v-for=产品中的产品

  {{ product.name }}

  /李

  /ul

  然而,在本文中,我将介绍六种方法,使您的v-for代码更加准确、可预测和强大。

  让我们开始吧。

  1.始终在 v-for 循环中使用 key

  首先,我们将讨论大多数Vue开发人员已经知道在v-for loop: key中使用的通用最佳实践3354。通过设置唯一的键属性,它可以确保组件以您期望的方式工作。

  如果我们不使用key,Vue会尽量让DOM高效,这可能意味着v-for元素可能会出现乱序或者其他不可预知的行为。如果我们对每个元素都有一个惟一的键引用,那么我们就可以更好、更准确地预测DOM将如何操作。

  保险商实验所

  李v-for=产品中的产品:key=产品。_id

  {{ product.name }}

  /李

  /ul

  2.在一个范围内循环

  虽然在大多数情况下,v-for用于遍历数组或对象,但在某些情况下,我们肯定只想循环一定次数。

  例如,假设我们正在为一个在线商店创建一个分页系统,我们只想在每页显示10个产品。使用一个变量来跟踪当前页码,我们可以像这样处理分页。

  保险商实验所

  li v-for=index in 10 :key=index

  {{产品[第10页索引] }}

  /李

  /ul

  3.不要在循环中使用 v-if

  一个超级常见的错误就是用v-if过滤v-for循环的数据。虽然这看起来很直观,但会导致巨大的性能问题。——VueJS优先考虑v-for,而不是v-if指令。

  这意味着您的组件将遍历每个元素,然后检查v-if条件以确定是否应该呈现它。所以,事实上,不管条件是什么,你都会遍历数组的每一项。

  不要这样做:

  //代码不好!

  保险商实验所

  里

  v-for=产品中的产品

  :key=product。_id

  v-if=product.price 50

  {{ product.name }}

  /李

  /ul

  4.使用计算属性或方法代替

  为了避免上述问题,我们应该在遍历模板之前过滤模板中的数据。有两种非常相似的方法:

  使用计算属性

  使用过滤方法

  下面快速介绍一下这两种方法。

  首先,我们只需要设置一个计算属性。为了获得与前面的v-if相同的功能,代码应该如下。

  保险商实验所

  里

  v-for=产品不足五年中的产品

  :key=product。_id

  {{ product.name }}

  /李

  /ul

  //.

  脚本

  导出默认值{

  data() {

  返回{

  产品:[],

  };

  },

  计算值:{

  productsUnderFifty: function() {

  返回this.products.filter(

  (产品)=产品价格50

  );

  },

  },

  };

  /脚本

  下面的代码几乎相同,但是使用方法改变了我们访问模板中的值的方式。如果我们希望能够将变量传递给过滤器,那么方法是最好的选择。

  保险商实验所

  里

  v-for=产品中的产品定价(50)

  :key=product。_id

  {{ product.name }}

  /李

  /ul

  //.

  脚本

  导出默认值{

  data() {

  返回{

  产品:[],

  };

  },

  方法:{

  产品价格{

  返回this.products.filter(

  (产品)=产品价格价格

  );

  },

  },

  };

  /脚本

  5.在循环中访问项目的索引

  除了遍历数组和访问每个元素,我们还可以跟踪每个项目的索引。

  为此,我们必须在项目后添加一个指标值。它非常简单,可用于分页、显示列表索引、显示排名等。

  保险商实验所

  里

  v-for=(产品,索引)in products

  :key=product。_id

  产品编号{{ index }}: {{ product.name }}

  /李

  /ul

  6.遍历一个对象

  到目前为止,我们只真正看到了使用v-for来遍历数组,但是我们可以很容易地遍历对象的键值对。

  类似于访问元素的索引,我们必须向循环中添加另一个值。如果我们用一个参数遍历一个对象,我们将遍历所有的项。

  如果我们添加另一个参数,我们将获得items和key,如果我们添加第三个,我们也可以访问v-for循环的索引。

  假设我们想要遍历产品中的每个媒体资源。

  保险商实验所

  里

  v-for=(产品,索引)in products

  :key=product。_id

  span v-for=(item,key,index) in product :key=key

  {{ item }}

  /span

  /李

  /ul

  总结

  我希望这篇短文能教你一些关于使用Vue的v-for指令的最佳实践。

  你还有其他建议吗?

  以上是写一个更好的v-for循环的六个技巧的细节。更多关于v-for循环的信息,请关注我们的其他相关文章!

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: