当前位置:首页 > 技术分析 > 正文内容

VUE循环语句的使用(v-for)

ruisui881个月前 (03-23)技术分析10

对数组进行遍历

使用v-for进行遍历时注意参数格式,以“site in sites”的格式填入参数,sites是被遍历的数据,site是遍历出的值。



<script>
export default {
  name: 'app',
  data(){
	  return {
		  sites:[2,2,5,7,4]
	  }
  }
}
</script>

展现结果

遍历对象参数

v-for遍历对象的参数时,第一个参数是参数值。



<script>
export default {
  name: 'app',
  data(){
	  return {
		  object: {
		            name: '李磊',
		            gen: '男',
		            achievement: 100
		          }
	  }
  }
}
</script>

展现结果

第二个参数是参数的名称(键名),用“,”连接



<script>
export default {
  name: 'app',
  data(){
	  return {
		  object: {
		            name: '李磊',
		            gen: '男',
		            achievement: 100
		          }
	  }
  }
}
</script>

展现结果

第三个参数是索引



<script>
export default {
  name: 'app',
  data(){
	  return {
		  object: {
		            name: '李磊',
		            gen: '男',
		            achievement: 100
		          }
	  }
  }
}
</script>

展现结果

迭代整数

v-for 可以循环整数

展现结果

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/2956.html

分享给朋友:

“VUE循环语句的使用(v-for)” 的相关文章

Git 分支管理策略与工作流程

(预警:因为详细,所以行文有些长,新手边看边操作效果出乎你的预料)团队开发中,遵循一个合理、清晰的Git使用流程,是非常重要的。否则,每个人都提交一堆杂乱无章的commit,项目很快就会变得难以协调和维护。看完这篇文章后,涉及GIT的工作中就会减少因为规范问题导致工作出错,当然如果你现在暂时还未有合...

Git分布式系统---Gitlab多人工作流程

前言在上一次推文中,我们已经很清楚的讲解了如何创建本地仓库、提交(push)项目到远程仓库以及从远程仓库clone(克隆)项目到本地的相关操作。大家可以先去看前面的推文(快速掌握Git分布式系统操作)点击查看目前无论你是否步入社会还是在校学生,都会使用Gitlab来进行团队的代码管理。(可以这样说:...

三维家-系统快捷键使用

快键件使用:通过简单的键盘+鼠标操作,快速完成搭配。1.基础快捷键1) Ctrl+V:复制选中对象第一步:鼠标左击物体,按下Ctrl+V 即可复制选中对象。2) Ctrl+G:组合多选对象第一步:按住Ctrl键多选对象--按住Ctrl+G--确定。3) Ctrl+B:解组选中对象第一步:左击选中对象...

分享15个基于Vue3.0全家桶的优秀开源项目

大家好,我是 Echa。今天来分享 15 个基于 Vue3.0 全家桶的优秀开源项目!1. Vue Admin Bettergithub : https://github.com/chuzhixin/vue-admin-bettervue admin better 对比其他来源 admin 框架有如...

史上最全 vue-router 讲解 !!!

前端路由 前端路由是后来发展到SPA(单页应用)时才出现的概念。 SPA 就是一个WEB项目只有一个 HTML 页面,一旦页面加载完成,SPA 不会因为用户的操作而进行页面的重新加载或跳转。 前端路由在SPA项目中是必不可少的,页面的跳转、刷新都与路由有关,通过不同的url显示相应的页面。 优点:前...

深入理解vue-router原理

说到vue-router就表明他只适合于vue和vue是强绑定的关系;不适合其他框架;现在我们模仿实现一个VueRouter;1.要使页面刷新;借助vue本身的响应式原理;import Home from "./views/Home"; import About from "...