v-for遍历数组和对象

1.遍历数组不显示index（下标）

        <div id="app">
            <ul>
                <li v-for="item in colors">{{item}}</li>
            </ul>
        </div>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            const app = new Vue({
                el: '#app',
                data: {
                    colors: ['red','yellow','blue','green']
                }
            })
        </script>

image.png

2.遍历数组并显示index(下标)

        <div id="app">
            <ul>
                <li v-for="(item,index) in colors">
                    {{index+1}}.{{item}}
                </li>
            </ul>
        </div>

image.png

3.遍历对象显示value值

        <div id="app">
            <ul>
                <li v-for="value in obj">{{value}}</li>
            </ul>
        </div>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            const app = new Vue({
                el: '#app',
                data: {
                    obj: {
                        name: 'sunny',
                        age: 18,
                        sex: 'male'
                    }
                }
            })
        </script>

只有一个变量时，该变量对应对象的value值

image.png

4.遍历对象显示key和value

        <div id="app">
            <ul>
                <li v-for="(value,key) in obj">{{key}}:{{value}}</li>
            </ul>
        </div>

有两个变量时，第一个变量代表value值，第二个变量代表key

image.png

5.遍历对象显示key、value和index

        <div id="app">
            <ul>
                <li v-for="(value,key,index) in obj">
                    {{index}}-{{key}}:{{value}}
                </li>
            </ul>
        </div>

image.png