vue html代码中写for循环,Vue的学习笔记（下篇）

原标题：Vue的学习笔记(下篇)

一、什么是Vue.js?

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

前面几天我们已经分享了Vue的学习笔记(中篇)和Vue的学习笔记(上篇)，今天我们一起来看看下篇。

二、Vue的v-for循环

(一)v-for循环普通数组

1.在data中定义普通数组；

data(){

return{

list: [1, 2, 3, 4, 5]

}

}

2.在html中使用v-for指令渲染；

索引值是：{ {i}} --- 每一项的值是：{ {item}}

3.效果图如下图：

(二)v-for循环对象数组

1.在data 中定义对象数组；

data(){

return{

list: [

{ id: 1, name: 'zhan1' },

{ id: 2, name: