015 V v-for

不二如是

                               
登录/注册后可看大图

上一讲我们搞定了v-show，本次来学习一个很重要的v-for指令。

当需要将一个数组遍历或枚举一个对象循环显示时，就要用到v-for。

然后表达式结合in来使用，创建一个div：

1. <div id="myApp">
   
2.     <ul>
   
3.         <li v-for="book in FishcBooks">{{book.name}}</li>
   
4.     </ul>
   
5. </div>

复制代码

创建Vue实例：

1. <script>
   
2.     var app = new Vue({
   
3.         el: "#myApp",
   
4.         data: {
   
5.             FishcBooks: [
   
6.                 {
   
7.                     name: "《零基础入门学习Python》"
   
8.                 }, {
   
9.                     name: "《零基础入门学习Scratch》"
   
10.                 }, {
    
11.                     name: "《零基础入门学习Web开发》系列"
    
12.                 }
    
13.             ]
    
14.         }
    
15.     })
    
16. </script>

复制代码

我们定义了一个数组类型的数据FishcBooks，用v-for将li元素循环渲染。

在表达式汇中，book是数据，用来表示当前元素的别名。

循环列出的li元素都可以访问到对应的当前数据book。

列表渲染也支持用of代替in作为分割符，更像JS的迭代器：

1. <li v-for="book of FishcBooks">{{book.name}}</li>

复制代码

v-for的表达式支持一个可选参数作为当前项的索引，我们修改div：

1. <div id="myApp">
   
2.     <ul>
   
3.         <li v-for="(book,index) in FishcBooks">{{index}}.{{book.name}}</li>
   
4.     </ul>
   
5. </div>

复制代码

Vue实例不修改，现在变为：

分隔符in前的语句用括号，第二项是FishcBooks的索引值。

与v-if一样，v-for也可以用在template标签中。

创建div：

1. <div id="myApp">
   
2.     <ul>
   
3.         <template v-for="book in FishcBooks">
   
4.             <li>书名：{{book.name}}</li>
   
5.             <li>作者:{{book.author}}</li>
   
6.         </template>
   
7.     </ul>
   
8. </div>

复制代码

创建Vue实例：

1. <script>
   
2.     var app = new Vue({
   
3.         el: "#myApp",
   
4.         data: {
   
5.             FishcBooks: [
   
6.                 {
   
7.                     name: '《零基础入门学习Python》',
   
8.                     author:"小甲鱼"
   
9.                 }, {
   
10.                     name: "《零基础入门学习Scratch》",
    
11.                     author:"不二如是"
    
12.                 }
    
13.             ]
    
14.         }
    
15.     })
    
16. </script>

复制代码

v-for还可以迭代整数，创建div和实例：

1. <div id="myApp">
   
2.     <span v-for="n in 10">{{ n }}</span>
   
3. </div>
   
4. <script>
   
5.     var app = new Vue({
   
6.         el: "#myApp"
   
7.     })
   
8. </script>

复制代码

---

课后作业


1、列表渲染中不能使用of代替in作为分割符（T/F）

2、下面的写法正确吗：

1.     <ul>
   
2.         <li v-for="{book,index} in FishcBooks">{{index}}.{{book.name}}</li>
   
3.     </ul>

复制代码

3、v-for可以用在内置标签<template>上？（T/F）

4、编写代码利用v-for遍历输出1到33间所有整数。



答案：

游客，如果您要查看本帖隐藏内容请回复

---

如果有收获，别忘了评分 ：

                               
登录/注册后可看大图

这位鱼油，如果喜欢Vue，请订阅 专辑（传送门）（不喜欢更要订阅 ）

                               
登录/注册后可看大图

lbjstudypython

1.F
2.T
3.T
4.

1. <div id="myapp">
   
2. <span v-for="x in 33">{{x}}</span>
   
3. </div>
   
4. <script>
   
5. var myapp = new Vue({
   
6.      el:'#myapp'
   
7. })
   
8. </script>

复制代码

Ruide

1.F
2.不对，(book, index)
3.T
4.<span v-for="n in 33">{{ n }}</span>

优时风

1

一笙彤

0

suweixuan1998

F
(book,index)
T
v-for="n of 33"

HanYanShuang

学习

jack6666

1