015 V v-for
本帖最后由 不二如是 于 2018-9-12 16:24 编辑https://xxx.ilovefishc.com/forum/201808/24/170823gj1tj61c4apj6o1e.jpg
上一讲我们搞定了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间所有整数。
答案：
**** Hidden Message *****
如果有收获，别忘了评分{:10_281:} ：
http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif
这位鱼油，如果喜欢Vue，请订阅 专辑（传送门）（不喜欢更要订阅{:10_297:} ）
http://xxx.fishc.com/forum/201803/21/151715umqz1qoywp11wjbq.gif 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> 1.F
2.不对，(book, index)
3.T
4.<span v-for="n in 33">{{ n }}</span> 1 0 F
(book,index)
T
v-for="n of 33" 学习 1
页:
[1]