Vue学习笔记5

列表渲染

用 v-for 把一个数组对应为一组元素

<div id="app">
    <li v-for = "item in array">
        {{item.message}}
    </li>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            array:[
                {message:'vue1'},
                {message:'vue2'},
                {message:'vue3'}
            ]
        },
    })
</script>

<div id="app">
    <li v-for = "item in array">
        {{item}}
    </li>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            array:[
                'vue1',
                'vue2',
                'vue3'
            ]
        },
    })
</script>

结果：

v-for 还支持一个可选的第二个参数为当前项的索引。

<div id="app">
    <ul id="example-2">
        <li v-for="(item, index) in items">
            {{ index }} - {{ item.message }}
        </li>
    </ul>
</div>
<script>
    var example2 = new Vue({
        el: '#example-2',
        data: {
            items: [
                {message:'vue1'},
                {message:'vue2'},
                {message:'vue3'}
            ]
        }
    })
</script>

结果：

对象的 v-for

可以用 v-for 通过一个对象的属性来迭代。

<ul id="v-for-object" class="demo">
    <li v-for="value in object">
        {{ value }}
    </li>
</ul>
<script>
    new Vue({
        el: '#v-for-object',
        data: {
            object: {
                o: 'vue1',
                ob: 'vue2',
                obj: 'vue3'
            }
        }
    })
</script>

结果：

<ul id="v-for-object" class="demo">
    <li v-for="(value,key) in object">
        {{key}}: {{ value }}
    </li>
</ul>
<script>
    new Vue({
        el: '#v-for-object',
        data: {
            object: {
                obj1: 'vue1',
                obj2: 'vue2',
                obj3: 'vue3'
            }
        }
    })
</script>

结果：

<ul id="v-for-object" class="demo">
    <li v-for="(value,key,index) in object">
        {{index}}. {{key}}: {{ value }}
    </li>
</ul>
<script>
    new Vue({
        el: '#v-for-object',
        data: {
            object: {
                obj1: 'vue1',
                obj2: 'vue2',
                obj3: 'vue3'
            }
        }
    })
</script>

结果: