Vue中v-for指令的四种使用

<div id="app">
    <p v-for="(item, i) in list">每一项值{{item}}---索引值为{{i}}</p>
</div>

<script>
    var vm = new Vue({
        el: ‘#app‘,
        data: {
            list: [1, 2, 3]
        },
        methods: {}
    });
</script>

<script>
    var vm = new Vue({
        el: ‘#app‘,
        data: {
            list: [
                {id: 1, name: ‘zs1‘},
                {id: 2, name: ‘zs2‘}
            ]
        },
        methods: {}
    });
</script>

<div id="app">
    <p v-for="(user, i) in list">id为{{user.id}}---name为{{user.name}}--索引值为{{i}}</p>
</div>

<script>
    var vm = new Vue({
        el: ‘#app‘,
        data: {
            user: {
                id: 1,
                name: ‘zs‘,
                gender: ‘male‘
            }
        },
        methods: {}
    });
</script>

<div id="app">
    <p v-for="(val, key, i) in user">值是{{val}}---键是{{key}}--索引值为{{i}}</p>
</div>

<script>
    var vm = new Vue({
        el: ‘#app‘,
        data: {},
        methods: {}
    });
</script>

<div id="app">
    <p v-for="count in 10">值是{{count}}</p>
</div>