015 V v-for

不二如是

                               
登录/注册后可看大图

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

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

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

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

创建Vue实例：

<script>
    var app = new Vue({
        el: "#myApp",
        data: {
            FishcBooks: [
                {
                    name: "《零基础入门学习Python》"
                }, {
                    name: "《零基础入门学习Scratch》"
                }, {
                    name: "《零基础入门学习Web开发》系列"
                }
            ]
        }
    })
</script>

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

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

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

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

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

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

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

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

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

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

创建div：

<div id="myApp">
    <ul>
        <template v-for="book in FishcBooks">
            <li>书名：{{book.name}}</li>
            <li>作者:{{book.author}}</li>
        </template>
    </ul>
</div>

创建Vue实例：

<script>
    var app = new Vue({
        el: "#myApp",
        data: {
            FishcBooks: [
                {
                    name: '《零基础入门学习Python》',
                    author:"小甲鱼"
                }, {
                    name: "《零基础入门学习Scratch》",
                    author:"不二如是"
                }
            ]
        }
    })
</script>

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

<div id="myApp">
    <span v-for="n in 10">{{ n }}</span>
</div>
<script>
    var app = new Vue({
        el: "#myApp"
    })
</script>

---

课后作业


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

2、下面的写法正确吗：

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

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

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



答案：

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

---

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

                               
登录/注册后可看大图

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

                               
登录/注册后可看大图

lbjstudypython

1.F
2.T
3.T
4.

<div id="myapp">
<span v-for="x in 33">{{x}}</span>
</div>
<script>
var myapp = new Vue({
     el:'#myapp'
})
</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