Vue.js入门与商城开发实战
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

4.3　v-for指令

v-for指令可以用来遍历数组/对象，可以根据data中的数据动态刷新视图。

注意　使用v-for渲染数据的时候，一定要记得将key属性加上去，并且要保证这个key的值是唯一并且不重复的，它的作用就是唯一标识数据的每一项，提高渲染性能。

4.3.1　基础语法

1.遍历数组

使用方式1：

v-for="item in arr"

其中，item是一个参数，表示数组中的每一项；arr也是一个参数，表示要遍历的数组。

使用方式2：

v-for="(item, index) in arr"

其中，index表示数组项的索引。

2.遍历对象

使用方式1：

v-for="value in obj"

其中，value表示对象的属性的值；obj表示需要遍历的对象。

使用方式2：

v-for="(value, key, index) in obj"

其中，key表示对象的键；index表示这个对象属性的索引，类似上面数组的index。

注意　下面两种方式不能动态刷新视图：

·使用数组的length属性去更改数组的时候不行。

·使用索引的方式去更改数组也不行。

解决方法：

·Vue.set（arr，index，value）方法。arr表示需要设置的数组，index表示数组索引，value表示该索引项的新的值，例如：Vue.set（vm.list，0，{id：111，name：'jack'}）。

·直接调用数组的splice（）方法。

4.3.2　简易数组的使用

循环使用v-for指令。v-for指令需要用到site in sites形式的特殊语法，关键词site、in、sites之间至少需要有一个空格隔开，其中，sites是源数据数组，site是数组元素迭代的别名。v-for可以绑定数据到数组来渲染一个列表。有两种数组的使用方法：

第一种，在for循环中直接写入数组，直接循环显示：

<li v-for="x in [1,3,5,7]">{{x}}</li>

第二种，在data中定义数组“shuzu”，然后在for循环中显示：

<li v-for="y in shuzu">{{y}}</li>

完整示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue.js中 v-for 循环指令-简易数组的使用</title>
    <!--加载本地vue.js的框架-->
    <script src="vue2.2.2.min.js"></script>
</head>
<body>
    <!--定义div代码块的id的值，这里定义的值为app，后面Vue会使用该值-->
    <div id="app">
        <ul>
        <!--循环显示数字数组-->
        <li v-for="x in [1,3,5,7]">{{x}}</li>
        </ul>
        
        <ul>
        <!--循环显示字符数组shuzu的内容-->
        <li v-for="y in shuzu">{{y}}</li>
        </ul>
    </div>
    
    <script>
    new Vue({
        el: '#app',//app为前面div代码块的id的值，通过“#”绑定
        //data区域定义属性的值
        data: {
            shuzu:["香蕉","苹果","西瓜"]//定义数组
            //后面没有数据，则这里定义完毕，后面不需要跟上逗号“，”
        }
    })
    </script>
</body>
</html>

效果如图4-9所示。

图4-9　v-for指令中简易数组的使用

4.3.3　在模板中的使用

在模板template中如何使用数组和循环显示？我们下面做了一个示例：在data代码块中定义一个数组shuzu；在html视图区域使用v-for="neirong in shuzu"模式来显示，neirong代表数组中的每个元素。

完整示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>模板中使用 v-for</title>
    <!--加载本地vue.js的框架-->
    <script src="vue2.2.2.min.js"></script>
</head>
<body>
    <!--定义div代码块的id的值，这里定义的值为app，后面Vue会使用该值-->
    <div id="app">
        <ul>
          <!--模板中循环显示字符数组shuzu的内容-->
          <template v-for="neirong in shuzu">
              <li>{{ neirong }}</li>
              <li>--------------</li>
          </template>
        </ul>
    </div>
    
    <script>
    new Vue({
        el: '#app',//app为前面div代码块的id的值，通过“#”绑定
        //data区域定义属性的值
        data: {
            shuzu:["香蕉","苹果","西瓜"]//定义数组
            //后面没有数据，则这里定义完毕，后面不需要跟上逗号“，”
        }
    })
    </script>
</body>
</html>

效果如图4-10所示。

图4-10　v-for指令中模板的使用

4.3.4　对象的迭代显示

v-for可以通过一个对象的属性来迭代数据。核心语句如下：

div v-for="别名 in 对象"

我们下面做一个示例：在data代码块中定义一个对象duixiang01，该对象有3个属性biaoti、xingming、quyu；在html视图区域使用v-for="neirong in duixiang01"来循环显示，neirong代表对象中的每个元素。

完整示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue.js中 v-for 循环指令-对象的迭代显示</title>
    <!--加载本地vue.js的框架-->
    <script src="vue2.2.2.min.js"></script>
</head>
<body>
    <!--定义div代码块的id的值，这里定义的值为app，后面Vue会使用该值-->
    <div id="app">
    <!--for语句循环显示对象里面的内容-->
        <div v-for="neirong in duixiang01">
        {{neirong}} 
        <!--变量neirong在上面for语句中定义，上面怎么定义，这里就怎么显示-->
        </div>
    </div>
    
    <script>
    new Vue({
        el: '#app',//app为前面div代码块的id的值，通过“#”绑定
        //data区域定义属性的值
        data: {
            //自定义一个对象，对象名:duixiang01
            duixiang01:{
                biaoti:"Vue教程",//对象内的元素，以键值对"key:value"的形式存在
                xingming:"黄菊华老师",//对象内的元素，以键值对"key:value"的形式存在
                quyu:"浙江杭州"//对象内的元素，以键值对"key:value"的形式存在
            }        
            //后面没有数据，则这里定义完毕，后面不需要跟上逗号“，”
        }
    })
    </script>
</body>
</html>

效果如图4-11所示。

图4-11　v-for指令实现对象的迭代显示

4.3.5　对象的迭代显示：提供第二个参数为键名

可以提供第二个参数为键名，我们定义了一个对象duixiang01。核心语法如下：

v-for="(value, key) in duixiang01"

其中，value和key定义了对象的某个元素的键值和键。

我们接下来做一个示例：定义一个对象，循环显示对象的key和value。具体步骤如下。

1）在Vue.js的data区域定义一个变量duixiang01，包含3个键值对。示例代码如下：

duixiang01:{
    biaoti:"Vue教程", 
    xingming:"黄菊华老师", 
    quyu:"浙江杭州" 
}

2）在html视图，使用v-for="（value，key）in duixiang01"来显示，value代表每个对象元素的值（比如Vue教程），key代表每个对象元素的键（比如biaoti）。

完整示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue.js中 v-for 循环指令-对象的迭代显示：提供第二个的参数为键名</title>
    <!--加载本地vue.js的框架-->
    <script src="vue2.2.2.min.js"></script>
</head>
<body>
    <!--定义div代码块的id的值，这里定义的值为app，后面Vue会使用该值-->
    <div id="app">
        <!--for语句循环显示对象里面的内容-->
        <div v-for="neirong in duixiang01">
        {{neirong}} 
        <!--变量neirong是在上面for语句中定义，上面怎么定义这里就怎么显示-->
        </div>
        
        <ul> 
            <!--for语句循环显示对象里面的内容-->
            <!--value表示对象每个元素的键值，也就是对象里面的冒号“：”后面的内容-->
            <!--key表示对象每个元素的键名，也就是对象里面的冒号“：”前面的内容-->
            <li v-for="(value, key) in duixiang01">
            {{ key }} : {{ value }}
            <!--key和value可以用其他变量名称代替-->    
            </li>
        </ul>

    </div>
    
    <script>
    new Vue({
      el: '#app',//app为前面div代码块的id的值，通过“#”绑定
        //data区域定义属性的值
        data: {
            //自定义一个对象，对象名为duixiang01
            duixiang01:{
            biaoti:"Vue教程",//对象内的元素，以键值对"key:value"的形式存在
            xingming:"黄菊华老师",//对象内的元素，以键值对"key:value"的形式存在
            quyu:"浙江杭州"//对象内的元素，以键值对"key:value"的形式存在
            }        
            //后面没有数据，则这里定义完毕，后面不需要跟上逗号“，”
         }
    })
    </script>
</body>
</html>

效果如图4-12所示。

图4-12　v-for指令实现对象的迭代显示（提供第二个参数为键名）

4.3.6　对象的迭代显示：提供第三个参数为索引

可以提供第三个参数为索引。核心语法如下：

v-for="(value, key, index) in duixiang01"

其中，value和key定义了对象的某个元素的键值和键；index表示对象中元素的序号，index和数组的下标均是从0开始。

我们接下来做一个示例：定义一个对象，循环显示对象的key、value、index。具体步骤如下。

1）在Vue.js的data区域定义一个变量duixiang01，包含3个键值对。代码如下：

duixiang01:{
    biaoti:"Vue教程", 
    xingming:"黄菊华老师", 
    quyu:"浙江杭州" 
}

2）在html视图，使用v-for="（value，key，index）in duixiang01"来显示，value代表每个对象元素的值（比如Vue教程），key代表每个对象元素的键（比如biaoti），index代表每个元素对应的下标（比如biaoti："Vue教程"对应的下标是0）。

完整示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue.js中 v-for 循环指令-对象的迭代显示：第三个参数为索引</title>
    <!--加载本地vue.js的框架-->
    <script src="vue2.2.2.min.js"></script>
</head>
<body>

<!--定义div代码块的id的值，这里定义的值为app，后面Vue会使用该值-->
<div id="app">
    <!--for语句循环显示对象里面的内容-->
    <div v-for="neirong in duixiang01">
        {{neirong}} 
        <!--变量neirong是在上面for语句中定义，上面怎么定义，这里就怎么显示-->
    </div>
    
    <ul> 
        <!--for语句循环显示对象里面的内容-->
        <!--value表示对象每个元素的键值，也就是对象里面的冒号“：”后面的内容-->
        <!--key表示对象每个元素的键名，也就是对象里面的冒号“：”前面的内容-->
        <!--(value, key)这里的顺序是不变的，先是键值然后是键名称，变量名可以自己定义-->
        <li v-for="(value, key) in duixiang01">
        {{ key }} : {{ value }}
        <!--key和value可以用其他变量名代替-->    
        </li>
    </ul>
    <hr>
    <ul> 
        <!--for语句循环显示对象里面的内容-->
        <!--value表示对象每个元素的键值，也就是对象里面的冒号“：”后面的内容-->
        <!--key表示对象每个元素的键名，也就是对象里面的冒号“：”前面的内容-->
        <!--index表示对象每个元素的索引，从0开始->
        <!--(value, key, index)这里的顺序是不变的，先是键值，然后是键名称，最后是索引，变
            量名可以自己定义-->
        <li v-for="(value, key, index) in duixiang01">
        {{ index }}. {{ key }} : {{ value }}
        <!--key、value、index，这里你可以自行用其他变量名称代替-->    
        </li>
    </ul>

</div>

<script>
new Vue({
    el: '#app',//app为前面div代码块的id的值，通过“#”绑定
    //data区域定义属性的值
    data: {
        //自定义一个对象，对象名:duixiang01
        duixiang01:{
            biaoti:"Vue教程",//对象内的元素，以键值对"key:value"的形式存在
            xingming:"黄菊华老师",//对象内的元素，以键值对"key:value"的形式存在
            quyu:"浙江杭州"//对象内的元素，以键值对"key:value"的形式存在
        }        
        //后面没有数据，则这里定义完毕，后面不需要跟上逗号“，”
    }
})
</script>

</body>
</html>

效果如图4-13所示。

图4-13　v-for指令实现对象的迭代显示（提供第三个参数为索引）

4.3.7　循环显示整数

v-for也可以循环整数，与使用简易数组的方式v-for="item in arr"类似。核心语法如下：

v-for="n in 10"

其中，整数10也可以是一个变量。

我们下面做一个示例：通过代码v-for="n in 10"循环显示从1到10的整数，默认整数从1开始。

完整示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue.js中 v-for 循环指令-循环显示整数</title>
    <!--加载本地vue.js的框架-->
    <script src="vue2.2.2.min.js"></script>
</head>
<body>
    <!--定义div代码块的id的值，这里定义的值为app，后面Vue会使用该值-->
    <div id="app">
        <ul>
            <!--for循环显示证书-->
            <li v-for="n in 10"><!--这里定义显示的变量为n，下面显示就用这个变量-->
                {{ n }}<!--显示内容-->
            </li>
        </ul>
    </div>
    
    <script>
    new Vue({
        el: '#app',//app为前面div代码块的id的值，通过“#”绑定
        //data区域定义属性的值
    })
    </script>
</body>
</html>

效果如图4-14所示。

图4-14　用v-for指令循环显示整数

4.3.8　九九乘法表

通过循环嵌套来显示九九乘法表，外层循环为v-for="y in 9"，内层循环为v-for="z in y"，其中z和y都是变量，y是外层中的变量。

我们下面做一个示例：通过嵌套循环实现九九乘法表。

完整示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue.js中 v-for 循环指令-九九乘法表</title>
    <!--加载本地vue.js的框架-->
    <script src="vue2.2.2.min.js"></script>
</head>
<body>
    <!--定义div代码块的id的值，这里定义的值为app，后面Vue会使用该值-->
    <div id="app">
        <!--外层循环-开始-->
        <div v-for="y in 9">
            <!--内层循环-开始-->
            <b v-for="z in y">
                {{y}}*{{z}}={{y*z}} |
            </b> 
            <!--内层循环-结束-->
        </div>
        <!--外层循环-结束-->
    </div>
    
    <script>
    new Vue({
        el: '#app',//app为前面div代码块的id的值，通过“#”绑定
        //data区域定义属性的值
    })
    </script>
</body>
</html>

效果如图4-15所示。

图4-15　用v-for指令实现九九乘法表

4.3.9　对属性进行升序排序

在迭代属性输出之前，v-for会对属性进行升序排序输出；这里的升序是针对对象的key（而不是value）来排列的。

我们下面做一个实例：在data代码块中定义一个对象duixiang01，内容如下。

duixiang01:{
    2:"2：JavaScript教程",
    1:"1：css教程",
    0:"0：html教程"
}

可以看到，对象key的顺序是2，1，0；通过v-for="neirong in duixiang01"循环显示时，会按0，1，2的顺序来显示。

完整示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>v-for会对属性进行升序排序</title>
    <!--加载本地vue.js的框架-->
    <script src="vue2.2.2.min.js"></script>
</head>
<body>
    <!--定义div代码块的id的值，这里定义的值为app，后面Vue会使用该值-->
    <div id="app">
    <!--for语句循环显示对象里面的内容-->
    <!--在迭代属性输出的之前，v-for会对属性进行升序排序输出-->
    <div v-for="neirong in duixiang01">
        {{neirong}} 
        <!--变量neirong是在上面for的语句中定义，上面怎么定义这里就怎么显示-->
    </div>
    </div>
    
    <script>
    new Vue({
        el: '#app',//app为前面div代码块的id的值，通过“#”绑定
        //data区域定义属性的值
        data: {
            //自定义一个对象，对象名:duixiang01
            duixiang01:{
                2:"2：JavaScript教程",//对象内的元素，以键值对"key:value"的形式存在
                1:"1：css教程",//对象内的元素，以键值对"key:value"的形式存在
                0:"0：html教程"//对象内的元素，以键值对"key:value"的形式存在
            }        
        //后面没有数据，则这里定义完毕，后面不需要跟上逗号“，”
        }
    })
    </script>
</body>
</html>

效果如图4-16所示。

图4-16　用v-for指令对属性进行升序排序

4.3.10　对象数组的内容显示

可以使用v-for指令和点号“.”显示对象内的内容。

下面的示例中我们定义了一个产品数组chanpins，里面包含了3个产品的数据，即产品的名称、价格和ID，通过for循环和点号“.”显示所有产品的信息。具体步骤如下：

1）在Vue.js的data区域定义数组变量chanpins，同时给它一个初始值。

2）在html视图区域，通过v-for="cp in chanpins"来循环显示产品数据。

3）cp代表数组的一个元素，这里是一个对象，代表产品的名称、价格和ID，对象内的值通过点号“.”加上属性名称来访问，比如cp.mc、cp.jiage、cp.cpid。

完整示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue.js中 v-for 循环指令-对象数组的内容显示</title>
    <!--加载本地vue.js的框架-->
    <script src="vue2.2.2.min.js"></script>
</head>
<body>

<!--定义div代码块的id的值，这里定义的值为app，后面Vue会使用该值-->
<div id="app">
    <!--for语句循环显示产品数组里面的内容-->
    <div v-for="cp in chanpins">
        <!--cp代表产品对象数组的每个元素，每个元素是一个对象，包含产品名称、价格、ID-->
        产品名称：{{cp.mc}}<br><!--访问对象里面的元素使用点号“.”-->
        产品价格：{{cp.jiage}}<br><!--访问对象里面的元素使用点号“.”-->
        产品 ID：{{cp.cpid}}<hr><!--访问对象里面的元素使用点号“.”-->
    </div>        
</div>

<script>
new Vue({
    el: '#app',//app为前面div代码块的id的值，通过“#”绑定
    //data区域定义属性的值
    data: {
        //定义数组（对象数组：数组里面的每个元素都是一个对象），数组名:chanpins
        chanpins:[
            {mc:"产品名称01",jiage:"88.00",cpid:1},
            {mc:"产品名称02",jiage:"105.00",cpid:2},
            {mc:"产品名称03",jiage:"166.00",cpid:3}
        ]  
        //后面没有数据，则这里定义完毕，后面不需要跟上逗号“，”
    }
})
</script>

</body>
</html>

效果如图4-17所示。

图4-17　用v-for指令显示对象数组的内容

4.3.11　v-for循环指令的嵌套

下面的示例中定义了一个包含对象的对象（对象嵌套），在循环显示对象中的每个元素时，判断元素是否是对象，如果是对象，再对该对象元素进行循环。具体步骤如下。

1）在Vue.js的data区域定义嵌套的对象duixiang01，该对象的最后一个值的内容也是一个对象。代码如下：

duixiang01:{
    xingming:"黄菊华老师",
    quyu:"浙江杭州",
    kecheng:{k1:"Vue入门课",k2:"Vue商城实战课"} //嵌套的对象
}

2）显示第一层循环，代码如下：

v-for="(v,k,i) in duixiang01"

其中，v代表value，k代表key，i代表index。

3）判断元素是否为普通的值，如果是则直接显示，代码如下：

<p v-if="typeof v !='object'">{{v}}</p>

4）如果是对象object，则再循环显示，代码如下：

<ul v-if="typeof v=='object'">
    <!--循环显示对象-内层循环-->
    <li v-for="(v1,k1,i1) in v">
        {{v1}}
    </li>
</ul>

完整的示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>如何使用for循环和if语句处理对象中的嵌套对象</title>
    <!--加载本地vue.js的框架-->
    <script src="vue2.2.2.min.js"></script>
</head>
<body>
    
<!--定义div代码块的id的值，这里定义的值为app，后面Vue会使用该值-->
<div id="app">
<ul>
<!--v表示对象每个元素的键值，也就是对象里面的冒号“：”后面的内容-->
<!--k表示对象每个元素的键名，也就是对象里面的冒号“：”前面的内容-->
<!--i表示对象每个元素的索引，从0开始-->
<!--(v,k,i)这里的顺序是不变的，先是键值，然后是键名称，最后是索引，变量名可以自己定义-->

<!--外层循环开始-->
<li v-for="(v,k,i) in duixiang01">
    <!--判断键值是否是对象-->
    <!--如果不是对象则直接显示-->
    <p v-if="typeof v !='object'">{{v}}</p><!--不是对象，直接显示键值-->

    <!--else后面的代码块表示是对象-->
    <p v-else>{{k}}</p> <!--是对象，不显示键值而显示键名-->

    <!--如果键值是对象，则循环显示其对象的内容-->
    <ul v-if="typeof v=='object'">
        <!--循环显示对象-内层循环-->
        <li v-for="(v1,k1,i1) in v">
            {{v1}}
        </li>
    </ul>
</li>
</ul>
</div>

<script>
new Vue({
    el: '#app',
    data: {
        //自定义一个对象，对象名:duixiang01
        duixiang01:{
        xingming:"黄菊华老师",//对象内的元素，以键值对"key:value"的形式存在
        quyu:"浙江杭州",//对象内的元素，以键值对"key:value"的形式存在
        kecheng:{k1:"Vue 入门课",k2:"Vue 商城实战课"} //嵌套的对象
        }
    }
})
</script>
    
</body>
</html>

效果如图4-18所示。

图4-18　用v-for指令显示嵌套的对象

上一章目录下一章