Vue基础学习 --- 遍历数组

Posted 2020-11-23 somethingwithios

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue基础学习 --- 遍历数组相关的知识，希望对你有一定的参考价值。

<body>
    <div id="app">
        <ul>
        <!-- 遍历数组 -->
            <li v-for="user in users">
                 {{user.name}}:{{user.age}}
            </li>

            <!-- index索引，从0开始。 -->
            <li v-for="(item, index) in users" :key="index">
                {{item.name}}:{{item.age}}
            </li>

        <!-- 遍历对象 value值如：Nimeide   index键如:name-->
            <li v-for="(value, index) in wife" :key="index">
                {{value}}--{{index}}
            </li>
        </ul>
    </div>
    <script>
        const vm = new Vue({
            el: ‘#app‘,
            data() {
                return {
                    // 数组
                    users: [
                        { name: ‘lisi‘, age: 12 },
                        { name: ‘zhangsan‘, age: 19 },
                    ],
                    // 对象
                    wife: {
                        name: ‘Nimeide‘,
                        age: 18
                    }
                }
            },
        });
    </script>
</body>

以上是关于Vue基础学习 --- 遍历数组的主要内容，如果未能解决你的问题，请参考以下文章

《C#零基础入门之百识百例》（二十一）数组遍历 -- 删除数组零元素