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

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

ruisui883个月前 (03-23)技术分析17

对数组进行遍历

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

学前端,这30个CSS选择器,你必须熟记

你学会了基本的id,class类选择器和descendant后代选择器,然后就觉得完事了吗?如果这样,你就会错过许多灵活运用CSS的机会。虽然本文提到的许多选择器都属于CSS3,并且只能在现代的浏览器中使用,但学会这些是大有好处的。什么是CSS选择器呢?每一条css样式定义由两部分组成,形式如下:[...

一文让你彻底搞懂 vue-Router

路由是网络工程里面的专业术语,就是通过互联把信息从源地址传输到目的地址的活动。本质上就是一种对应关系。分为前端路由和后端路由。后端路由:URL 的请求地址与服务器上的资源对应,根据不同的请求地址返回不同的资源。前端路由:在单页面应用中,根据用户触发的事件,改变URL在不刷新页面的前提下,改变显示内容...

VUE3+JAVA商城源码小程序APP商城

三勾小程序商城基于springboot+element-ui+uniapp打造的面向开发的小程序商城,方便二次开发或直接使用,可发布到多端,包括微信小程序、微信公众号、QQ小程序、支付宝小程序、字节跳动小程序、百度小程序、android端、ios端。软件架构后端: springboot2.3.12管...

三勾商城(java+vue3)微信小程序商城+SAAS+前后端源码

项目介绍本系统功能包括: 前台展示+后台管理+SAAS管理端,包括最基本的用户登录注册,下单, 购物车,购买,结算,订单查询,收货地址,后台商品管 理,订单管理,用户管理等等功能,小伙伴一起来看看吧。三勾小程序商城基于springboot+element-ui+uniapp打造的面向开发的小程序商城...

html5迁移到微信小程序的 方法 亲测可用

切图网习惯于在做小程序之前先做成html5+vuejs的形式,因为html5切图是我们比较熟悉的方式,而且有专业的工具 以及浏览器调试也会更加的方便 灵活,效率高,而且html5的方式可以方便预览看效果,方便调整,当html5页面做好确认没问题以后 再转成小程序或者官方出品wepy的方式,这个时候就...

尤雨溪:Vue 2生命周期已正式结束,开发团队应迁移至最新版本

IT之家 1 月 2 日消息,Vue.js 作者尤雨溪发文声称,Vue 2 已于 2023 年 12 月 31 日结束生命周期(EOL),目前 Vue 2 已经无法接收到新功能及修复补丁,还在使用 Vue 2 的开发团队应迁移至最新的 Vue 3 版本。据悉,Vue 2.0 最初发布于 2016 年...