Vue学习之路第十三篇：v-for指令

v-for指令，看名字想必大家也能猜到其作用，没错，就是用来迭代、遍历的。

1、简单数组的遍历

<body>

    <divi id="app">

        <span v-for="item in list">{{item}}&emsp;</span>

    </div>

    <script type="text/javascript">

        var vm = new Vue({

            el:"#app",

            data:{

                list:['one','two','three','four','five']

            },

            methods:{}

        })

    </script>

</body>

data里定义了list字符串数组，在页面中使用v-for指令对list进行遍历，"item"是当前正在遍历的元素对象，“in”是固定语法，“list”是被遍历的数组。用插值表达式来展示当前遍历的对象。

有时除了遍历数据外，我们还需要当前遍历的序号：

 <divi id="app">

    <span v-for="(item,i) in list">序号为：{{i}}，元素为：{{item}}<br></span>

 </div>

（Item,i）其中i为序号，当然i和item是临时变量可以任意定义。运行结果：

2、对象数组的遍历

<body>

    <divi id="app">

        <span v-for="(item,i) in list">序号：{{i}}，科目为：{{item.course}}，分数为：{{item.score}}<br></span>

    </div>

    <script type="text/javascript">

        var vm = new Vue({

            el:"#app",

            data:{

                list:[

                    {'course':'语文', 'score':89},

                    {'course':'数学', 'score':80},

                    {'course':'英语', 'score':90}

                ]

            },

            methods:{}

        })

    </script>

</body>

通过"item.score"的方法，来获取对象的属性值。运行结果如下：

3、遍历对象

<body>

    <divi id="app">

        <span v-for="(value,key) in mark">属性名：{{key}}，属性值：{{value}}<br></span>

    </div>

    <script type="text/javascript">

        var vm = new Vue({

            el:"#app",

            data:{

                mark:{

                    '语文':90,

                    '数学':95,

                    '英语':89

                }

            },

            methods:{}

        })

    </script>

</body>

这里定义了一个mark对象，该对象有三个属性，遍历对象的时候固定写法为：(XX,YY)，其中YY为对象的key，XX为对象的值。

当然也可以写成：(XX,YY,i)，其中i为索引值。

4、遍历数字

<divi id="app">

      <span v-for="count in 5">当前数字为：{{count}}<br></span>

</div>

这里in后面直接写的是具体的数字。运行结果：

总结：v-for进行遍历的时候，其可以遍历数组、对象数组、对象、数字。

每天进步一点点！

巴特西

Vue学习之路第十三篇：v-for指令

最新文章

热门文章