【Vue2.0学习】—条件渲染（三十九）-阿里云开发者社区

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

2023-12-01 35

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 【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>