vue循环实现复用较高组件

v-for的基本用法

三种基本功能：迭代数组、迭代对象、迭代整数
详细的例子和语法介绍可以查看菜鸟
vue.js循环语句https://www.runoob.com/vue2/vue-loop.html
下面针对这三种基本功能在现在常用的应用进行简单总结：

迭代数组：site in sites

虽然在菜鸟中，使用了

v-for="site in sites"
//省略其他语句
sites: 
[
  { name: 'Runoob' },
  { name: 'Google' },
  { name: 'Taobao' }
 ]

的语法，但是在实际应用中，Google Chrome浏览器会显示异常：不推荐使用没有初始化的变量，虽然显示异常后仍会正常工作，但是为了保证程序或系统的稳定性和鲁棒性，尽量少的异常是必须的。因此，所有用法最好统一为：

v-for="(site,index) in sites" :key="index"
//这里的index是索引，用来标定不同数组元素，避免出现重复

这样可以很好的避免出现初始化变量异常。

迭代对象：value in object

在菜鸟中使用了

v-for="value in object"
//省略其他语句
object:{
  name:"big han",
  url:"http://www.runoob.com",
  slogan:"hello! runoob"
}

依然会产生变量未初始化的异常，当然，菜鸟中也有相应的解决方式：提供第二个参数为键名

  

    

    {
    { key }} : {
    { value }}
    
  

注意：这里没有在v-for语句之后声明键名，没有出现

:key="..."

虽然很多人都知道，在不使用索引值的情况下，声明键名与否并不重要，但是在实际应用中，未进行浏览器设置或没有在代码中声明的，浏览器会报异常，所以这里建议依然像我们之前的做法，声明索引。
然后是使用索引的情况：提供第三个参数为索引

  

    

     {
    { index }}. {
    { key }} : {
    { value }}
    
  

以上有三种方式使用v-for迭代对象：

object: {
name: ‘菜鸟教程’,
url: ‘http://www.runoob.com’,
slogan: ‘学的不仅是技术，更是梦想！’
}
####1. 一个参数：value
菜鸟教程
http://www.runoob.com
学的不仅是技术，更是梦想！

2. 两个参数：value,key

name : 菜鸟教程
url : http://www.runoob.com
slogan : 学的不仅是技术，更是梦想！

3. 三个参数：value,key,index

0.name : 菜鸟教程
1.url : http://www.runoob.com
2.slogan : 学的不仅是技术，更是梦想！

迭代整数：n in 9

菜鸟提供用法如下：

  

    

     {
    { n }}
    
  

这个用法是没有异常的，在实际应用中，只有已知循环的数量，才会循环固定次数。一般在界面美化中使用。