小妍Vue笔记——目录
v-for的使用方法
用 v-for 把一个数组对应为一组元素
我们可以用 v-for 指令基于一个数组来渲染一个列表。 v-for 指令需要使用 item in items 形式的特殊语法,其中 items 是源数据数组,而 item 则是被迭代的数组元素的别名。如下所示:
1 <ul>
2 <li v-for="fruit in fruits">
3 {
{
fruit.name }}
4 </li>
5 </ul>
在 v-for 块中,我们可以访问所有父作用域
的属性。v-for 还支持一个可选的第二个参数,即当前项的索引。如下所示:
1 <ul>
2 <li v-for="(fruit, index) in fruits">
3 {
{
msg }} - {
{
index }} - {
{
fruit.name }}
4 </li>
5 </ul>
你也可以用 of 替代 in 作为分隔符,因为它更接近 JavaScript 迭代器的语法,如下所示:
1 <ul id="example-3">
2 <li v-for="fruit of fruits">
3 {
{
fruit.name }}
4 </li>
5 </ul>
其中fruits是js中定义的一个数组,如下所示:
复制代码
1 <script type="text/javascript">
2 var app = new Vue({
3 el: '#app',
4 data: {
5 msg: 'hello world!!!',
6 fruits: [
7 {
id:<