hualinux 进阶 vue 1.10：vue命令（六）循环v-for命令

本文链接：https://blog.csdn.net/hualinux/article/details/115466812

本文详细介绍了Vue.js中的v-for指令，包括其基本用法、如何绑定别名、使用key属性优化渲染以及注意事项。通过一个列举水果的例子，展示了v-for在实际应用中的操作。同时强调了v-for与v-if的优先级，并提醒在使用v-for时，合理使用key属性能提升渲染效率。

摘要由CSDN通过智能技术生成

一、v-for指令用法

二、例子列出水果

三、注意事项

有时要以列表的方式，显示数据，使用循环命令是最好不过的了。vue也提供了v-for循环命令。

一、v-for指令用法

可以看Vue的v-for指令

预期：Array | Object | number | string | Iterable (2.6 新增)
用法：

基于源数据多次渲染元素或模板块。此指令之值，必须使用特定语法 alias in expression，为当前遍历的元素提供别名：

<div v-for="item in items">
  {{ item.text }}
</div>

另外也可以为数组索引指定别名 (或者用于对象的键)：

<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, name, index) in object"></div>

v-for 的默认行为会尝试原地修改元素而不是移动它们。要强制其重新排序元素，你需要用特殊 attribute key 来提供一个排序提示：

<div v-for="item in items" :key="item.id">
  {{ item.text }}
</div>

从 2.6 起，v-for 也可以在实现了可迭代协议的值上使用，包括原生的 Map 和 Set。不过应该注意的是 Vue 2.x 目前并不支持可响应的 Map 和 Set 值，所以无法自动探测变更。

当和 v-if 一起使用时，v-for 的优先级比 v-if 更高。详见列表渲染教程

v-for 的详细用法可以通过以下链接查看教程详细说明。

参考：
- 列表渲染
- key

二、例子列出水果

主要HTML代码如下:引入vue.js文件这里不写了

<body>
    <div id="root">
        <ul>
            <li v-for="item in fruit" style="list-style: none">{{item}}</li>
        </ul>
    </div>

    <script>
        new Vue({
            el: "#root",
            data: {
                fruit: ["葡萄","橘子","苹果","柚子","桔子"]
            },
            methods: {
                t1: function (){
                    this.show= !this.show
                }
            }
        })
    </script>
</body>

三、注意事项

当我们使用v-for的时候，我们使用key属性会提升渲染效率。如果不用频繁排序可以用index，如果是则会有问题的

<ul>
    <li v-for="(item,index) in fruit" style="list-style: none" v-bind:key="index">{{item}}</li>
</ul>

hualinux 进阶 vue 1.10：vue命令（六）循环v-for命令

一、v-for指令用法

二、例子 列出水果

三、注意事项

二、例子列出水果