Vue学习笔记5

最新推荐文章于 2025-09-10 14:53:18 发布

weixin_34034670

最新推荐文章于 2025-09-10 14:53:18 发布

阅读量86

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5b4c4372e51d455d6825a8c4

本文详细介绍了Vue.js框架中v-for指令的使用方法，包括如何通过数组和对象进行列表渲染，并展示了如何获取当前项的索引。

列表渲染

用 `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>
复制代码

结果:

转载于:https://juejin.im/post/5b4c4372e51d455d6825a8c4