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

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

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

对数组进行遍历

使用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)” 的相关文章

Beta版Linux Mint“Xia”发行版22.1发布

IT之家 12 月 13 日消息,Beta 版 Linux Mint“Xia” 22.1 昨日(12 月 12 日)发布,新版本基于 Ubuntu 24.04,内核版本为 Linux 6.8,长期支持将持续到 2029 年,为用户提供可靠稳定的使用体验。新版本在软件包管理方面,主要弃用了传统的 ap...

「干货」通俗易懂的Deno 入门教程

作者: semlinker转发链接:https://mp.weixin.qq.com/s/2eqRTsf_z7Bcs6dziXe73Q一、Deno 简介Deno 是一个 JavaScript/TypeScript 的运行时,默认使用安全环境执行代码,有着卓越的开发体验。Deno 含有以下功能亮点:默...

如何在GitLab上回退指定版本的代码?GitLab回退指定版本问题分析

在Git中,回退到指定版本并不是删除或撤销之前的提交,而是创建一个新的提交,该提交包含指定版本的内容。这意味着您需要将当前代码更改与指定版本之间的差异进行比较,并将其合并到一个新的提交中。如果您没有更新本地代码,并且您希望将 GitLab 仓库回退到指定版本,您可以使用以下命令:git fetchg...

html5+css3做的响应式企业网站前端源码

大家好,今天给大家介绍一款,html5+css3做的响应式企业网站前端源码 (图1)。送给大家哦,获取方式在本文末尾。首页banner幻灯片切换特效(图2)首页布局简约合理(图3)关于我们页面(图4)商品列表(图5)商品详情(图6)服务介绍(图7)新闻列表(图8)联系我们(图9)源码完整,需要的朋友...

vue2中路由的使用步骤,你学会了吗?

今天我们来整理下关于vue2中路由的使用步骤:1. 导入 vue 文件和Vue-router文件(注意:vue-router是依赖vue运行的,所以一定在vue后引入vue-router)2. 定义路由组件模板3. 创建路由实例并定义路由规则4. 将路由实例挂载给Vue实例5. 在结构区域定义控制路...

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

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