Vue 常用指令 v-for 标签循环展示数据

富士康质检员张全蛋

已于 2025-02-11 14:45:32 修改

阅读量7.8k

点赞数 2

分类专栏： Vue.js 文章标签： vue.js

于 2023-07-27 11:30:18 首次发布

本文链接：https://blog.csdn.net/qq_34556414/article/details/131955501

版权

Vue.js 专栏收录该内容

38 篇文章

订阅专栏

v-for指令用于基于数组或对象进行列表渲染，它是响应式的，可以配合v-bind和v-on操作列表。在示例中展示了如何使用v-for渲染li和h2标签，以及如何添加和删除数据。此外，文章强调了在v-for中使用唯一key的重要性，以帮助Vue有效地更新和重排DOM元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

v-for指令的作用是将作为模板的那个标签，还有内部的内容，根据循环的次数拷贝若干份。

v-for：根据数据生成列表结构，并且是响应式的，可以十分便捷的操作列表结构了。至于是什么样的列表，就看你指令使用的位置了，列表的生成依赖于数据，所以先去定义数据。

它结合的类型挺多的，数组，对象，迭代器，字符串，最常使用的是数组，里使用数组来演示。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="" type="text/css" rel="stylesheet"/>
    <script src="https://unpkg.com/vue@3"></script>
    <style>
        .box{
            width: 500px;
            height: 500px;
            background-color: aquamarine;
        }
    </style>
</head>
         
<body>    

    <div id="demo">
        <ul> 
            <li v-for="(value,index) in myArray" :key="index">
                {{value}}----{{index}}
             </li>
        </ul>
        <ol>
            <li v-for="(value,key) in myObj" :key="key">
                {{value}}----{{key}}
             </li>
        </ol>

    </div>

    <script type="text/javascript">

         const vm = {
            data() {
                return {
                   myArray: [
                    'golang',
                    'gin',
                    'gorm',
                    'vue'
                   ],
                   myObj: {
                    name: "lucas",
                    age: 10,
                    info: 'boy like travel'
                   }
                }
            },
         }
        const test = Vue.createApp(vm).mount("#demo")
    </script>

</body>
</html>

循环，无非使用的最多的就是循环数组和对象。

这里多个的是li标签，这里就使用v-for指令去生成多个li。如果li中有内容，那么每个生成的标签就会将内容包含进去。

v-for指令的作用是将作为模板的那个标签，还有内部的内容，根据循环的次数拷贝若干份。item的值是可以使用的。

item的值可以结合其他指令，比如使用v-bind和v-on指令。

除了数组的每项数据之外，数组的索引页也是比较常用的。

item和index都是可以修改其名称的。

如果数组的每一项不是数字，而是对象或者其他复杂的类型，那么item代表这个对象，要获取内部的值要结合.语法。如果不使用点语法，那么会将整个对象渲染出来。

v-for还有个特点，比如数组的长度发生变化了，比如添加了或者删除了，那么生成的列表也会发生改变。

可以看到v-for指令是可以结合v-bind指令的：

<h2 v-for="item in objarr" v-bind:title="item.name" >

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="" type="text/css" rel="stylesheet"/>
    <script src="https://unpkg.com/vue@3"></script>
    <style type="text/css">

    </style>
</head>

<body>    
    <div id="vue">
      <ul type="circle">
        <li  v-for="(item,index) in arr">
            number:{{ item }} index:{{ index+1 }} 
        </li>
        <h2 v-for="item in objarr" v-bind:title="item.name">
           {{ item }}
        </h2>

        <h1 v-for="item in objarr">
            {{ item.name }}
        </h1>
      </ul>
    </div>

    <script type="text/javascript">
        const HelloVueApp = {
            data(){
                return{
                    arr:[1,2,3,4],
                    objarr:[
                        {
                            name: "lucas",
                            id : 1
                         },
                        {
                            name: "jerry",
                            id: 2
                        }
                    ]

                }
            }
        } 
    //挂载到html当中
    Vue.createApp(HelloVueApp).mount('#vue')

    </script>

</body>

</html>

来测试一下数据的变更，添加增加数据的方法。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="" type="text/css" rel="stylesheet"/>
    <script src="https://unpkg.com/vue@3"></script>
    <style type="text/css">

    </style>
</head>

<body>    
    <div id="vue">
      <button type="button" @click="add()">add</button>
      <button type="button" @click="remove()">remove</button>
      <ul type="circle">
        <li  v-for="(item,index) in arr">
            number:{{ item }} index:{{ index+1 }} 
        </li>
        <h2 v-for="item in objarr" v-bind:title="item.name">
           {{ item }}
        </h2>

        <h1 v-for="item in objarr">
            {{ item.name }}
        </h1>
      </ul>
    </div>

    <script type="text/javascript">
        const HelloVueApp = {
            data(){
                return{
                    arr:[1,2,3,4],
                    objarr:[
                        {
                            name: "lucas",
                            id : 1
                         },
                        {
                            name: "jerry",
                            id: 2
                        }
                    ]

                }
            },
            methods:{
               add:function(){
                this.objarr.push(
                    {name: "lisa",id: 3}
                );
               },
               remove:function(){
                //移除最左边的元素
                this.objarr.shift();
               }
            }
        } 
    //挂载到html当中
    Vue.createApp(HelloVueApp).mount('#vue')

    </script>

</body>

</html>

--------------------------------------------------------------------------------------------------------------------------------

v-for：就地更新

key的属性主要是易于让vue维护数据的状态，其实也就是它的顺序。使用v-for就需要加key的属性，就是更好的帮你去维护它。可以理解为必加的而且唯一的，比如数组里面的索引，或者对象里面的key是唯一的。

<li v-for="(val,index)in myArray2" :key="val.id">

当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用 “ 就地更新 ” 的策略。如果数据项的顺序

被改变， Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一的 key 属性 :

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="" type="text/css" rel="stylesheet"/>
    <script src="https://unpkg.com/vue@3"></script>
    <style type="text/css">

    </style>
</head>

<body>    
    <div id="vue">
         <ul>
            <li v-for="(item,index) in userinfo">
                {{item.id}}
               <input type="text" :value="item.name" :key="item.id">
               <button type="button" @click="remove(index)">删除</button>
            </li>
        </ul>
    </div>

    <script type="text/javascript">
        const HelloVueApp = {
            data(){
                return{
                   userinfo:[{id:1,name:"lucas",age:20},{id:2,name:"guanchunyan",age:18},{id:3,name:"jerry",age:30}],
                }
            },
            methods:{
               remove:function(index){
                  this.userinfo.splice(index,1)
               }
            }
        } 
    //挂载到html当中
    Vue.createApp(HelloVueApp).mount('#vue')

    </script>

</body>

</html>

select这里其实就是利用事件，事件里面保存了当前打开的的事件值。

<select @change="computer($event)"> 为了能够拿到选择的值，将select这个事件传过去。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="" type="text/css" rel="stylesheet"/>
    <script src="https://unpkg.com/vue@3"></script>
    <style type="text/css">
        .box{
            width: 500px;
            height: 500px;
            background-color: yellow;
        }
        .active{
            background-color: red;
        }
    </style>
</head>

<body>    
    <div id="vue">
        <select @change="computerSelect($event)">
            <option value="None">未选择</option>
            <option v-for="row in myObj.computers" :key="row.id" :value="row.id">{{row.name}}</option>
        </select>
       <p>当前选择的主机ID:{{ selectID }}</p>

    </div>

    <script type="text/javascript">
     
     var vueDemo = {
        data() { 
            return {
               myObj: {
                host: '主机',
                displayer: '显示器',
                keyboard: '键盘',
                computers: [
                    {id: 1,name: "主机1"},
                    {id: 2,name: "主机2"},
                    {id: 3,name: "主机3"}
                ],
               },
               selectID: ''
            }
        },
        methods: {
           computerSelect(event){
              console.log(event)
              this.selectID = event.target.value  //获取事件的值
           }
        },
     }
        
    Vue.createApp(vueDemo).mount("#vue") //创建vue实例并且挂在在标签

    </script>

</body>

</html>