详解在Vue.js编写更好的v-for循环的6种技巧


Posted in Javascript onApril 14, 2020

在VueJS中,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 指令的最佳做法。
你还有什么其他建议吗?

原文:https://learnvue.co/2020/02/6-techniques-to-write-better-vuejs-v-for-loops/?utm_source=rss&utm_medium=rss&utm_campaign=6-techniques-to-write-better-vuejs-v-for-loops
翻译:杜尼卜

到此这篇关于详解在Vue.js编写更好的v-for循环的6种技巧的文章就介绍到这了,更多相关Vue.js v-for循环内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jQuery Ajax文件上传(php)
Jun 16 Javascript
探索Emberjs制作一个简单的Todo应用
Nov 07 Javascript
jquery获取table中的某行全部td的内容方法
Mar 08 Javascript
Javascript表格翻页效果的具体实现
Oct 05 Javascript
js实现基于正则表达式的轻量提示插件
Aug 29 Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
Sep 28 Javascript
ES6 javascript中Class类继承用法实例详解
Oct 30 Javascript
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
Jun 28 Javascript
vue中typescript装饰器的使用方法超实用教程
Jun 17 Javascript
js实现贪吃蛇小游戏
Oct 29 Javascript
0基础学习前端开发的一些建议
Jul 14 Javascript
输入框跟随文字内容适配宽实现示例
Aug 14 Javascript
编写一个javascript元循环求值器的方法
Apr 14 #Javascript
javascript设计模式 ? 装饰模式原理与应用实例分析
Apr 14 #Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
Apr 14 #Javascript
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
Apr 14 #Javascript
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
Apr 13 #Javascript
JS实现表单中点击小眼睛显示隐藏密码框中的密码
Apr 13 #Javascript
vue cli3适配所有端方案的实现
Apr 13 #Javascript
You might like
php用正则表达式匹配URL的简单方法
2013/11/12 PHP
PHP中使用Session配合Javascript实现文件上传进度条功能
2014/10/15 PHP
详解PHP数组赋值方法
2015/11/07 PHP
php实现批量修改文件名称的方法
2016/07/23 PHP
PHP之多条件混合筛选功能的实现方法
2019/10/09 PHP
锋利的jQuery jQuery中的DOM操作
2010/03/21 Javascript
js监听键盘事件示例代码
2013/07/26 Javascript
JS OffsetParent属性深入解析
2014/01/13 Javascript
JS常用字符串处理方法应用总结
2014/05/22 Javascript
javascript 寻找错误方法整理
2014/06/15 Javascript
详解jQuery UI库中文本输入自动补全功能的用法
2016/04/23 Javascript
AngularJS基础 ng-include 指令简单示例
2016/08/01 Javascript
js控住DOM实现发布微博效果
2016/08/30 Javascript
简单谈谈ES6的六个小特性
2016/11/18 Javascript
Vue计算属性的学习笔记
2017/03/22 Javascript
js微信分享实现代码
2020/10/11 Javascript
浅谈React组件之性能优化
2018/03/02 Javascript
vue router+vuex实现首页登录验证判断逻辑
2018/05/17 Javascript
利用es6 new.target来对模拟抽象类的方法
2019/05/10 Javascript
JavaScript undefined及null区别实例解析
2020/07/21 Javascript
vue 将多个过滤器封装到一个文件中的代码详解
2020/09/05 Javascript
[01:05:40]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第三场
2014/05/24 DOTA
Python多进程通信Queue、Pipe、Value、Array实例
2014/11/21 Python
python操作redis的方法
2015/07/07 Python
在主机商的共享服务器上部署Django站点的方法
2015/07/22 Python
Python 数据库操作 SQLAlchemy的示例代码
2019/02/18 Python
python实现视频分帧效果
2019/05/31 Python
如何分离django中的媒体、静态文件和网页
2019/11/12 Python
在Python中通过threshold创建mask方式
2020/02/19 Python
M1芯片安装python3.9.1的实现
2021/02/02 Python
HTML5+CSS3模仿优酷视频截图功能示例
2017/01/05 HTML / CSS
Antonioli美国在线商店:时尚前卫奢华
2019/07/29 全球购物
一些.net面试题
2014/10/06 面试题
写给医院的感谢信
2015/01/22 职场文书
2015年司机年终工作总结
2015/05/14 职场文书
《三国志》赏析
2019/08/27 职场文书