编写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 相关文章推荐
JQuery实现简单时尚快捷的气泡提示插件
Dec 20 Javascript
jQuery根据表单name获取值的方法
May 24 Javascript
jQuery获取table行数并输出单元格内容的实现方法
Jun 30 Javascript
JS之获取样式的简单实现方法(推荐)
Sep 13 Javascript
使用bootstrap插件实现模态框效果
May 10 Javascript
Vue之Watcher源码解析(2)
Jul 19 Javascript
angularjs2 ng2 密码隐藏显示的实例代码
Aug 01 Javascript
Node.js服务器开启Gzip压缩教程
Aug 11 Javascript
AngularJS下$http服务Post方法传递json参数的实例
Mar 29 Javascript
原生JS实现列表子元素顺序反转的方法分析
Jul 02 Javascript
Vue项目路由刷新的实现代码
Apr 17 Javascript
vue.js使用v-model实现父子组件间的双向通信示例
Feb 05 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
php中3种方法统计字符串中每种字符的个数并排序
2012/08/27 PHP
PHP接收json 并将接收数据插入数据库的实现代码
2015/12/01 PHP
PHP常用函数之格式化时间操作示例
2019/10/21 PHP
javascript 获取图片颜色
2009/04/05 Javascript
javaScript 数值型和字符串型之间的转换
2009/07/25 Javascript
JavaScript 对象模型 执行模型
2009/12/06 Javascript
详解Bootstrap创建表单的三种格式(一)
2016/01/04 Javascript
微信小程序-详解数据缓存
2016/11/24 Javascript
浅谈angular4生命周期钩子
2017/09/05 Javascript
vue-router启用history模式下的开发及非根目录部署方法
2018/12/23 Javascript
详解用JS添加和删除class类名
2019/03/25 Javascript
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
2019/12/17 Javascript
tracking.js实现前端人脸识别功能
2020/04/16 Javascript
vue 中的动态传参和query传参操作
2020/11/09 Javascript
[03:53]2016国际邀请赛中国区预选赛第三日TOP10精彩集锦
2016/06/29 DOTA
[51:28]EG vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/16 DOTA
用Python制作简单的朴素基数估计器的教程
2015/04/01 Python
Python中的lstrip()方法使用简介
2015/05/19 Python
python函数与方法的区别总结
2019/06/23 Python
Django用户认证系统 Web请求中的认证解析
2019/08/02 Python
使用python实现微信小程序自动签到功能
2020/04/27 Python
使用python实现CGI环境搭建过程解析
2020/04/28 Python
Python __slots__的使用方法
2020/11/15 Python
pycharm 多行批量缩进和反向缩进快捷键介绍
2021/01/15 Python
CSS3 Calc实现滚动条出现页面不跳动问题
2017/09/14 HTML / CSS
Laura Mercier官网:彩妆大师罗拉玛斯亚的化妆品牌
2018/01/04 全球购物
VICHY薇姿俄罗斯官方网上商店:法国护肤品牌,火山温泉水
2019/11/22 全球购物
秋季开学典礼主持词
2014/03/19 职场文书
中介业务员岗位职责
2014/04/09 职场文书
部门年终奖分配方案
2014/05/07 职场文书
2015年乡镇扶贫工作总结
2015/04/08 职场文书
2015年教师师德师风承诺书
2015/04/28 职场文书
html+css 实现简易导航栏功能
2021/04/07 HTML / CSS
英镑符号 £
2022/02/17 杂记
MySQL慢查询优化解决问题
2022/03/17 MySQL
python在package下继续嵌套一个package
2022/04/14 Python