Vue学习：列表渲染v-for

最新推荐文章于 2024-05-15 18:29:17 发布

¡Venceremo

最新推荐文章于 2024-05-15 18:29:17 发布

阅读量234

点赞数

分类专栏： Vue 文章标签： vue.js Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_47295886/article/details/128970348

版权

Vue 专栏收录该内容

155 篇文章 1 订阅

订阅专栏

展示3个人信息

v-for遍历数组

vue管理用一个形参接受数组内容

i是形参，v-for="i in persons"

  <li v-for="i in persons" :key="i.id">
                {{i.name}}-{{i.age}}
            </li>

<body>
    <!-- 准备容器 -->
    <div id='root'>
        <ul>
            <h2>人员列表</h2>
            <!-- :key="i.id" 让每个li都有唯一的标识 只要用遍历 必须用到唯一标识-->
            <li v-for="i in persons" :key="i.id">
                {{i.name}}-{{i.age}}
            </li>
    
        </ul>
    </div>
    <script>

        const vm = new Vue({
            el: '#root',
            data: {//属性
                persons:[
                    {id:001,name:'张三',age:12},
                    {id:002,name:'李四',age:13},
                    {id:003,name:'王五',age:12},


                ]
            },

        });
    </script>

:key="i.id" 让每个li都有唯一的标识只要用遍历必须用到唯一标识-

<li v-for="(p,index) in persons">两个形参

a是形参，b是索引值,需要保证ul里面每一个id都不一样


<body>
    <!-- 准备容器 -->
    <div id='root'>
        <ul>
            <h2>人员列表</h2>
            <!-- :key="i.id" 让每个li都有唯一的标识 只要用遍历 必须用到唯一标识-->
            <li v-for="i in persons" :key="i.id">
                {{i.name}}-{{i.age}}
            </li>
            <hr>
            <li v-for="(p,index) in persons" :key="index+9" >
                {{p}}+{{index}}
            </li>
        </ul>
    </div>
    <script>

        const vm = new Vue({
            el: '#root',
            data: {//属性
                persons:[
                    {id:001,name:'张三',age:12},
                    {id:002,name:'李四',age:13},
                    {id:003,name:'王五',age:12},


                ]
            },

        });
    </script>
</body>

v-for="(p,index) of persons" of也可遍历（数组，索引）

       <ul>
            <li v-for="i  of persons" :key="i.id">
                {{i.name}}-{{i.age}}
            </li>
        </ul>

v-for遍历对象（显示key 然后是value）

   <ul>
            <h2>骑车信息-对象</h2>
            <li v-for="(a,b) of car" :key="a.id">
               {{a}}-----{{b}}
            </li>
        </ul>

        const vm = new Vue({
            el: '#root',
            data: {//属性
                persons: [
                    { id: 001, name: '张三', age: 12 },
                    { id: 002, name: '李四', age: 13 },
                    { id: 003, name: '王五', age: 12 },


                ],
                car: {
                    name:"XXX",
                    price:'92093w',
                    color:'white'
                }
            },

        });

v-for遍历字符串（显示每个字符然后是索引）

      <ul>
            <h2>遍历字符串</h2>
            <li v-for="(a,b) of char" :key="a.id">
               {{a}}-----{{b}}
            </li>
        </ul>

 char:"abcdz"

v-for遍历指定次数值索引

    <ul>
            <h2>遍历指定次数</h2>
            <li v-for="(a,b) of 5" :key="a.id">
               {{a}}-----{{b}}
            </li>
        </ul>

v-for指令总结

用于展示列表数据

v-for="(item,index)" in xxx :key="yyy" key唯一

可遍历：数组、对象、字符串、指定次数（后面的两个用的少）

¡Venceremo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习：列表渲染v-for

v-for指令总结1. 用于展示列表数据2. v-for="(item,index)" in xxx :key="yyy"3. 可遍历：数组、对象、字符串、指定次数（后面的两个用的少）
复制链接

扫一扫

专栏目录