Vue学习笔记（十、v-for循环普通数组）

先看一个简单的v-for循环：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>VueBaseCode</title>
    <script src="./lib/vue.js"></script>
</head>

<body>
    <div id="app">
        <p v-for="i in 10">这是第{
   
   {i}}次循环</p>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {}
        });
    </script>
</body>

</html>

输出结果是：

这里注意两点，一个是虽然这个循环里面没有用到Vue对象vm中的任何数据，但是这个vm对象是必须有的，因为vm对象通过“#app”才能控制id为'app'的div内的内容。第二个是这个i的值是从1开始的，不是0。

再看一个数组输出给p元素的原始写法：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>VueBaseCode</title>
    <script src="./lib/vue.js"></script>
</head>

<body>
    <div id="app">
        <p>{
   
   {list[0]}}</p>
        <p>{
   
   {list[1]}}</p>
        <p>{
   
   {list[2]}}</p>
        <p>{
   
   {list[3]}}</p>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                list:['比亚迪','蔚来','小鹏','理想']
            },
            methods: {}
        });
    </script>
</body>

</html>

此时输出的结果是：

这里我们使用v-for的基本写法改造一下div内的p元素：

    <div id="app">
        <p v-for="item in list">{
   
   {item}}</p>
    </div>

此时，我们能够得到和上面相同的结果。

这里我们再让p输出索引值，写法如下：

    <div id="app">
        <p v-for="(item,i) in list">索引：{
   
   {i}}_品牌：{
   
   {item}}</p>
    </div>

此时输出结果如下：

对象遍历参考如下：

<body>
    <div id="app">
        <p v-for="(car,i) in list">索引：{
   
   {i}}_品牌：{
   
   {car.brand}}_型号：{
   
   {car.model}}</p>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                list: [
                    { brand: '比亚迪', model: '元PLUS' },
                    { brand: '蔚来', model: 'EC6' },
                    { brand: '小鹏', model: 'P7' },
                    { brand: '理想', model: 'L8' }
                ]
            },
            methods: {}
        });
    </script>
</body>

输出结果如下：

需要注意的是，在下面这一行中

<p v-for="(car,i) in list">索引：{
   
   {i}}_品牌：{
   
   {car.brand}}_型号：{
   
   {car.model}}</p>

在(car,i)里面谁表示对象，谁表示索引与名称无关，只与位置有关，如果写成(i,car)，那么i就是对象，car就是索引，前面的写法只是因为我们通常习惯用i指代索引，所以才写成(car,i)。

Vue学习笔记（十、v-for循环普通数组）

猜你喜欢