编写v-for循环的技巧汇总


Posted in Javascript onDecember 01, 2020

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

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

<ul>
 <li v-for="product in products">
  {{ product.name }}
 </li>
</ul>

但是,在本文中,我将介绍六种方法来使你的 v-for 代码更加精确,可预测和强大。

让我们开始吧。

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

首先,我们将讨论大多数 Vue 开发人员已经知道的常见最佳做法——在 v-for 循环中使用 :key。通过设置一个惟一的键属性,它可以确保组件以您期望的方式工作。

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

<ul>
 <li v-for="product in products" :key="product._id">
  {{ product.name }}
 </li>
</ul>

2.在一个范围内循环

尽管大多数情况下,v-for 用于遍历数组或对象,但在某些情况下,我们肯定只希望循环执行一定次数。

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

<ul>
 <li v-for="index in 10" :key="index">
  {{ products[page * 10 + index] }}
 </li>
</ul>

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

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

这意味着您的组件将循环遍历每个元素,然后检查 v-if 条件以确定是否应渲染。因此,实际上,无论条件是什么,您都将遍历数组的每个项目。

不要这样:

// BAD CODE!
<ul>
 <li
  v-for="product in products"
  :key="product._id"
  v-if="product.price < 50"
 >
  {{ product.name }}
 </li>
</ul>

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

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

使用计算属性
使用过滤方法
让我们快速地介绍一下这两种方法。

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

<ul>
 <li
  v-for="products in productsUnderFifty"
  :key="product._id"
 >
  {{ product.name }}
 </li>
</ul>

// ...
<script>
 export default {
  data() {
   return {
    products: [],
   };
  },
  computed: {
   productsUnderFifty: function() {
    return this.products.filter(
     (product) => product.price < 50
    );
   },
  },
 };
</script>

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

<ul>
 <li
  v-for="products in productsUnderPrice(50)"
  :key="product._id"
 >
  {{ product.name }}
 </li>
</ul>

// ...

<script>
 export default {
  data() {
   return {
    products: [],
   };
  },
  methods: {
   productsUnderPrice(price) {
    return this.products.filter(
     (product) => product.price < price
    );
   },
  },
 };
</script>

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

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

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

<ul>
 <li
  v-for="(products, index) in products"
  :key="product._id"
 >
  Product #{{ index }}: {{ product.name }}
 </li>
</ul>

6.遍历一个对象

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

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

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

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

<ul>
 <li
  v-for="(products, index) in products"
  :key="product._id"
 >
  <span v-for="(item, key, index) in product" :key="key">
   {{ item }}
  </span>
 </li>
</ul>

总结

希望这篇简短的文章能教您一些有关使用 Vue 的 v-for 指令的最佳做法。

你还有什么其他建议吗?

以上就是编写更好的v-for循环的6种技巧的详细内容,更多关于v-for循环的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
JS中style属性
Oct 11 Javascript
JavaScript中关于indexOf的使用方法与问题小结
Aug 05 Javascript
js实现同一页面多个不同运动效果的方法
Apr 10 Javascript
JavaScript+html5 canvas绘制的小人效果
Jan 27 Javascript
Node.js 回调函数实例详解
Jul 06 Javascript
JS库之Waypoints的用法详解
Sep 13 Javascript
three.js实现3D模型展示的示例代码
Dec 31 Javascript
node中实现删除目录的几种方法
Jun 24 Javascript
jquery 遍历hash操作示例【基于ajax交互】
Oct 12 jQuery
JS中间件设计模式的深入探讨与实例分析
Apr 11 Javascript
Node.js API详解之 V8模块用法实例分析
Jun 05 Javascript
ECharts transform数据转换和dataZoom在项目中使用
Dec 24 Javascript
jquery实现拖拽添加元素功能
Dec 01 #jQuery
创建与框架无关的JavaScript插件
Dec 01 #Javascript
jQuery实现可以扩展的日历
Dec 01 #jQuery
如何使用gpu.js改善JavaScript的性能
Dec 01 #Javascript
jQuery实现容器间的元素拖拽功能
Dec 01 #jQuery
jQuery实现查看图片功能
Dec 01 #jQuery
vue实现表格合并功能
Dec 01 #Vue.js
You might like
二十行语句实现从Excel到mysql的转化
2006/10/09 PHP
详解:――如何将图片储存在数据库里
2006/12/05 PHP
php中执行系统命令的方法
2015/03/21 PHP
CodeIgniter控制器之业务逻辑实例分析
2016/01/20 PHP
PHP面向对象程序设计之多态性的应用示例
2018/12/19 PHP
jQuery ui1.7 dialog只能弹出一次问题
2009/08/27 Javascript
使用jQuery.fn自定义jQuery翻页插件
2013/01/20 Javascript
在表单提交前进行验证的几种方式整理
2013/07/31 Javascript
javascript 获取图片尺寸及放大图片
2013/09/04 Javascript
js对列表中第一个值处理与jsp页面对列表中第一个值处理的区别详解
2013/11/05 Javascript
js中switch case循环实例代码
2013/12/30 Javascript
JS判断字符串长度的5个方法(区分中文和英文)
2014/03/18 Javascript
jquery 构造函数在表单提交过程中修改数据
2015/05/25 Javascript
深入探究JavaScript中for循环的效率问题及相关优化
2016/03/13 Javascript
jquery中实现时间戳与日期相互转换
2016/04/12 Javascript
Vue.Js中的$watch()方法总结
2017/03/23 Javascript
JAVA中截取字符串substring用法详解
2017/04/14 Javascript
JS数组操作中的经典算法实例讲解
2017/07/26 Javascript
vue router下的html5 history在iis服务器上的设置方法
2017/10/18 Javascript
AngularJS自定义过滤器用法经典实例总结
2018/05/17 Javascript
JavaScript正则表达式验证登录实例
2020/03/18 Javascript
jQuery实现的移动端图片缩放功能组件示例
2020/05/01 jQuery
VUE 单页面使用 echart 窗口变化时的用法
2020/07/30 Javascript
关于angular引入ng-zorro的问题浅析
2020/09/09 Javascript
[41:20]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS DK
2014/05/26 DOTA
[02:36]DOTA2上海特锦赛 回忆电竞生涯的重要瞬间
2016/03/25 DOTA
python抓取京东小米8手机配置信息
2018/11/13 Python
在Python中,不用while和for循环遍历列表的实例
2019/02/20 Python
python 获取微信好友列表的方法(微信web)
2019/02/21 Python
Python求两点之间的直线距离(2种实现方法)
2019/07/07 Python
Python3 全自动更新已安装的模块实现
2020/01/06 Python
python中openpyxl和xlsxwriter对Excel的操作方法
2021/03/01 Python
应届生英语教师求职信
2013/11/05 职场文书
课外活动实习计划
2015/01/19 职场文书
导游词之山东孔庙
2019/11/04 职场文书
CSS3 天气图标动画效果
2021/04/06 HTML / CSS