编写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 相关文章推荐
可拖动窗口,附带鼠标控制渐变透明,开启关闭功能
Jun 26 Javascript
angular 动态组件类型详解(四种组件类型)
Feb 22 Javascript
video.js使用改变ui过程
Mar 05 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
Apr 19 Javascript
jquery实现简单实用的轮播器
May 23 jQuery
JS实现弹出下载对话框及常见文件类型的下载
Jul 13 Javascript
Vue.js 单页面多路由区域操作的实例详解
Jul 17 Javascript
去掉vue 中的代码规范检测两种方法(Eslint验证)
Mar 21 Javascript
Vue2.x Todo之自定义指令实现自动聚焦的方法
Jan 08 Javascript
详解用Webpack与Babel配置ES6开发环境
Mar 12 Javascript
vue中格式化时间过滤器代码实例
Apr 17 Javascript
详解关于React-Router4.0跳转不置顶解决方案
May 10 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中substr函数字符串截取用法分析
2016/01/07 PHP
javascript flash下fromCharCode和charCodeAt方法使用说明
2008/01/12 Javascript
javascript优先加载笔记代码
2008/09/30 Javascript
IE和Firefox下event事件杂谈
2009/12/18 Javascript
JavaScript Event学习第六章 事件的访问
2010/02/07 Javascript
jquery radio 操作代码
2011/03/16 Javascript
jsTree 基于JQuery的排序节点 Bug
2011/07/26 Javascript
js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
2012/12/27 Javascript
js中复制行和删除行的操作实例
2013/06/25 Javascript
JavaScript实现复制功能各浏览器支持情况实测
2013/07/18 Javascript
JavaScript加入收藏夹功能(兼容IE、firefox、chrome)
2014/05/05 Javascript
node.js中的事件处理机制详解
2016/11/26 Javascript
js微信扫描二维码登录网站技术原理
2016/12/01 Javascript
jQuery文字轮播特效
2017/02/12 Javascript
Angular2 路由问题修复详解
2017/03/01 Javascript
JavaScript 实现 Tab 点击切换实例代码
2017/03/25 Javascript
Vue导出json数据到Excel电子表格的示例
2017/12/04 Javascript
ZK中使用JS读取客户端txt文件内容问题
2019/11/07 Javascript
jQuery插件实现图片轮播效果
2020/10/19 jQuery
Python安装Imaging报错:The _imaging C module is not installed问题解决方法
2014/08/22 Python
python统计文本文件内单词数量的方法
2015/05/30 Python
Python正则表达式分组概念与用法详解
2017/06/24 Python
python+selenium+chrome批量文件下载并自动创建文件夹实例
2020/04/27 Python
pytorch SENet实现案例
2020/06/24 Python
Python虚拟环境的创建和使用详解
2020/09/07 Python
python两个list[]相加的实现方法
2020/09/23 Python
Python getsizeof()和getsize()区分详解
2020/11/20 Python
解决pytorch 数据类型报错的问题
2021/03/03 Python
退休党员个人对照检查材料思想汇报
2014/09/29 职场文书
公司授权委托书格式样本
2014/10/01 职场文书
上课迟到检讨书
2015/05/06 职场文书
幼师辞职信范文大全
2015/05/12 职场文书
详解python中[-1]、[:-1]、[::-1]、[n::-1]使用方法
2021/04/25 Python
javascript遍历对象的五种方式实例代码
2021/10/24 Javascript
vue组件冲突之引用另一个组件出现组件不显示的问题
2022/04/13 Vue.js
java实现面板之间切换功能
2022/06/10 Java/Android