vue中 v-for循环的用法详解

简介: vue中 v-for循环的用法详解

1、v-for循环普通数组

①创建vue对象


② 循环数据


结果:


2、v-for循环对象数组

① 创建vue实例对象


② 循环对象数组


结果:


3、v-for循环对象

①创建vue对象实例


②循环对象


结果:


4、v-for循环数字

①创建vue对象实例


②循环数字


结果:



5、v-for中key的使用方式

①创建vue对象实例


注意:push()方法一般是添加到数组的最后的位置;unshift()方法是往最前面的位置添加。

②循环


注意:


v-for循环的时候,key属性只能使用number或String。key在使用的时候,必须使用v-bind属性绑定的形式,指定key的值。在组件中使用v-for循环的时候,或者在一些特殊情况中,如果v-for有问题,必须在使用v-for的同时,指定唯一的 字符串/数字 类型 :key值。


结果:


相关文章
|
7天前
|
资源调度 JavaScript 前端开发
【vue】vue中的路由vue-router,vue-cli脚手架详细使用教程
【vue】vue中的路由vue-router,vue-cli脚手架详细使用教程
|
7天前
|
JavaScript
【vue】深入探讨vue中组件间多种传值方式
【vue】深入探讨vue中组件间多种传值方式
【vue】深入探讨vue中组件间多种传值方式
|
7天前
|
JavaScript 前端开发
vue组件化开发流程梳理,拿来即用
vue组件化开发流程梳理,拿来即用
|
7天前
|
移动开发 JavaScript 前端开发
Vue Router的介绍与引入
Vue Router的介绍与引入
|
7天前
|
JavaScript 应用服务中间件 nginx
vue中404解决方法
vue中404解决方法
|
11天前
|
JavaScript
【vue】如何跳转路由到指定页面位置
【vue】如何跳转路由到指定页面位置
14 0
|
11天前
|
资源调度 JavaScript 前端开发
【vue】vue-cli版本选择和比较(vue-cli3.0新版本如何创建项目)
【vue】vue-cli版本选择和比较(vue-cli3.0新版本如何创建项目)
18 1
|
11天前
|
JavaScript 前端开发
【vue】iview如何把input输入框和点击输入框之后的边框去掉
【vue】iview如何把input输入框和点击输入框之后的边框去掉
15 0
|
11天前
|
JavaScript UED
【vue】iview组件 DatePicker 日期选择器如何显示默认当前日期
【vue】iview组件 DatePicker 日期选择器如何显示默认当前日期
14 1
|
7天前
|
JavaScript
Vue 中如何模块化使用 Vuex
Vue 中如何模块化使用 Vuex