编写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里的prototype使用示例
Nov 19 Javascript
js+html5通过canvas指定开始和结束点绘制线条的方法
Jun 05 Javascript
jQuery解决IE6、7、8不能使用 JSON.stringify 函数的问题
May 31 Javascript
AngularJS延迟加载html template
Jul 27 Javascript
微信小程序Redux绑定实例详解
Jun 07 Javascript
react 创建单例组件的方法
Apr 26 Javascript
jQuery实现table表格checkbox全选的方法分析
Jul 04 jQuery
AngularJS自定义表单验证功能实例详解
Aug 24 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
Sep 14 Javascript
微信小程序request请求封装,验签代码实例
Dec 04 Javascript
vue实现分页的三种效果
Jun 23 Javascript
canvas 中如何实现物体的框选
Aug 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中动态调用函数的方法
2015/03/16 PHP
typecho插件编写教程(三):保存配置
2015/05/28 PHP
详解PHP执行定时任务的实现思路
2015/12/21 PHP
ThinkPHP3.2框架操作Redis的方法分析
2019/05/05 PHP
利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)
2013/11/25 Javascript
jquery中get和post的简单实例
2014/02/04 Javascript
nodejs教程之异步I/O
2014/11/21 NodeJs
bootstrap改变按钮加载状态
2014/12/01 Javascript
jQuery电话号码验证实例
2017/01/05 Javascript
Vue.js用法详解
2017/11/13 Javascript
jQuery each和js forEach用法比较
2019/02/27 jQuery
Python中常用操作字符串的函数与方法总结
2016/02/04 Python
python 文件操作api(文件操作函数)
2016/08/28 Python
Python中模块pymysql查询结果后如何获取字段列表
2017/06/05 Python
Windows平台Python连接sqlite3数据库的方法分析
2017/07/12 Python
python3使用pyqt5制作一个超简单浏览器的实例
2017/10/19 Python
python ddt实现数据驱动
2018/03/14 Python
pandas 读取各种格式文件的方法
2018/06/22 Python
解决Pycharm下面出现No R interpreter defined的问题
2018/10/29 Python
python Django中models进行模糊查询的示例
2019/07/18 Python
python对象销毁实例(垃圾回收)
2020/01/16 Python
Python selenium抓取虎牙短视频代码实例
2020/03/02 Python
使用python自动追踪你的快递(物流推送邮箱)
2020/03/17 Python
Python openpyxl 插入折线图实例
2020/04/17 Python
Python通过文本和图片生成词云图
2020/05/21 Python
Python如何获取文件路径/目录
2020/09/22 Python
10个顶级Python实用库推荐
2021/03/04 Python
澳大利亚最大的在线美发和美容零售商之一:My Hair Care & Beauty
2019/08/24 全球购物
会计应聘求职信范文
2013/12/17 职场文书
学习保证书范文
2014/04/30 职场文书
小学元宵节活动总结
2015/02/06 职场文书
九年级数学教学反思
2016/02/17 职场文书
MySQL命令无法输入中文问题的解决方式
2021/08/30 MySQL
Canvas如何做个雪花屏版404的实现
2021/09/25 HTML / CSS
python神经网络学习 使用Keras进行回归运算
2022/05/04 Python
Redis全局ID生成器的实现
2022/06/05 Redis