Vue2.0学习—条件渲染（三十九）

Posted 2022-10-28 王同学要努力

【Vue2.0学习】—条件渲染（三十九）

一、v-for指令
1、用于展示数据的列表
2、语法：v-for="(item,index)" in XXX :key="yyyy"
3、可遍历数组、对象、字符串、指定次数

   <div id="root">
        <h2>人员列表</h2>
        <ul>
            <!-- <li v-for="p in persons" :key="p.id">p.name-p.age</li> -->
            <li v-for="(p,index) of persons" :key="index">p.name-p.age</li>
        </ul>
        <br>
        <br>
        <hr>
        <!-- 遍历对象 -->
        <h2>汽车列表</h2>
        <ul>

            <li v-for="(value,key) of cars" :key="key">key-value</li>
        </ul>
        <br>
        <br>
        <hr>
        <!-- 遍历字符串 -->
        <h2>测试遍历字符串</h2>
        <ul>

            <li v-for="(char,index) of str" :key="index">char-index</li>
        </ul>

        <br>
        <br>
        <hr>
        <!-- 遍历指定的次数 -->
        <h2>遍历指定的次数</h2>
        <ul>

            <li v-for="(number,index) of 5" :key="index">index-number</li>
        </ul>
    </div>
    <script>
        const vm = new Vue(
            el: '#root',
            data: 
                persons: [
                    id: '001',
                    name: '张三',
                    age: 18
                , 
                    id: '002',
                    name: '李四',
                    age: 19
                , 
                    id: '003',
                    name: '王五',
                    age: 20
                ],
                cars: 

                    name: '奥迪',
                    color: '白色',
                    price: '200万'
                ,
                str: 'helloworld'

            
        )
    </script>

二、key的作用与原理