4.vue常见指令v-for的基本使用

最新推荐文章于 2024-07-18 18:59:22 发布

彼岸的饭碗

最新推荐文章于 2024-07-18 18:59:22 发布

阅读量1.6k

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_42392049/article/details/116764752

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

v-for是vue的循环指令，它的作用是遍历数组（对象）的每一个值

<body>
    <div id="app">
        <ul>
            <li v-for="item in arr">
                {{item}}
            </li>
        </ul>
    </div>
    <script src="vue.js"></script>
    <script>
        var vue=new Vue({
            el:"#app",
            data:{
               i:0,
               arr:[
                   '苹果',
                   '橘子',
                   '香蕉',
                   '🍓'
               ]
            },
            methods:{
            
            }
        })
    </script>
</body>

v-for还有index和key属性

<li v-for="(item,index) in arr" :key="index">{{index}}--{{item}}</li>

item指的是被遍历数组（对象）的每一个值，item的命名不是规定的，可以自定义命名

index指的是每一项被遍历的值下标索引值

key是用来给每一项值加元素标识，作用是为了区分元素，为了实现最小量的更新

<li v-for="(value,key,index) in obj" :key="index">
           {{key}}=={{value}}
</li>

            data:{
               obj:{
                   name:'小明',
                   age:'17',
                   heifht:'175cm',
                   sex:'男',
                   hobby:'打篮球'
               }
            },

与数组不同的是，此时key代表对象中的key值，value代表的是对象中的value值。

上面三个参数的含义分别为：

item表示对象的内容，
key表示的是对象key键值名称，
index表示的是当前obj的下标索引值

实际工作中我们使用V-for遍历JSON多一些

var vue=new Vue({
            el:"#app",
            data:{
               arr:[
                      {name:'小明',age:'17',height:'168cm'},
                      {name:'小红',age:'17',height:'208cm'},
                      {name:'小黄',age:'18',height:'188cm'},
                      {name:'小吕',age:'20',height:'128cm'}
               ]
            },
        })

<table>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>身高</th>
            </tr>
            <tr v-for="(item,index) in arr">
                <!---Json中的姓名-->
                <td>{{item.name}}</td>
                <!---Json中的年龄-->
                <td>{{item.age}}</td>
                <!---Json中的身高-->
                <td>{{item.height}}</td>
            </tr>
</table>

结果

在这里插入图片描述此外，v-for可以嵌套

<body>
    <div id="app">
        <table>
            <tr v-for="i in number":ley="i">
                <td v-for="j in i">
                    {{i}}*{{j}}={{i*j}}
                </td>
            </tr>
        </table>
    </div>
    <script src="vue.js"></script>
    <script>
        var vue=new Vue({
            el:"#app",
            data:{
               number:[1,2,3,4,5,6,7,8,9],
            },
        })
    </script>
</body>