第七课 Vue中的v-for遍历指令

Vue中的v-for遍历指令

v-for用于对象遍历（数组/JSON），渲染数据列表

基础示例：

    <div id="app">
        <ul>
            <li v-for="val in arr">{{val}}</li>
        </ul>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                arr: ['这是数据测试aaa', '这是数据测试bbb', '这是数据测试ccc', '这是数据测试ddd']
            }
        })
    </script>   

数组遍历

1）遍历数组值

    <div id="app">
        <ul>
            <li v-for="val in arr">{{val}}</li>
        </ul>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                arr: ['这是数据测试aaa', '这是数据测试bbb', '这是数据测试ccc', '这是数据测试ddd']
            }
        })
    </script>  

2. 遍历数组键/值

    <div id="app">
        <ul>
            <li v-for="(val, key) in arr">{{key}} ： {{val}}</li>
        </ul>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                arr: ['这是数据测试aaa', '这是数据测试bbb', '这是数据测试ccc', '这是数据测试ddd']
            }
        })
    </script> 

对象遍历

1. 遍历对象

    <div id="app">
        <ul>
            <li v-for="val in obj">姓名：{{val.name}} - 年龄：{{val.age}}</li>
        </ul>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                obj: [
                    {'name': 'Bob', 'age': '20'},
                    {'name': 'Jerry', 'age': '18'},
                    {'name': 'Summer', 'age': '15'},
                    {'name': 'Lili', 'age': '21'},
                ]
            }
        })
    </script>  

2）遍历对象键/值对

    <div id="app">
        <ul>
            <li v-for="(val, key) in obj">ID:{key}} - 姓名：{{val.name}} - 年龄：{{val.age}}</li>
        </ul>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                obj: [
                    {'name': 'Bob', 'age': '20'},
                    {'name': 'Jerry', 'age': '18'},
                    {'name': 'Summer', 'age': '15'},
                    {'name': 'Lili', 'age': '21'},
                ]
            }
        })
    </script>  

原文地址：https://blog.csdn.net/weixin_44010641/article/details/142936329

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！