Vue学习——v-for

最新推荐文章于 2023-11-27 08:41:42 发布

suntwylla

最新推荐文章于 2023-11-27 08:41:42 发布

阅读量436

点赞数

分类专栏： Vue学习文章标签： vue

本文链接：https://blog.csdn.net/meicx_bupt/article/details/72855650

版权

Vue学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue中v-for指令的使用，包括数组迭代、对象迭代、整数迭代、组件中的应用，以及如何处理数组更新检测和显示过滤、排序结果。在数组迭代中，讨论了不同形式的语法，如item in items，(item, index) in items等。对象迭代则通过value、key和index三个参数进行。文章还提到了在组件中使用v-for时需借助props传递数据，并提醒读者注意Vue无法检测某些数组变动的情况，建议使用Vue.set或splice方法来确保响应性。" 78597097,7397025,Hive外部表查询HBase长整型数据乱码问题解决,"['大数据开发', 'Hive', 'HBase', '数据存储']

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

一、数组迭代

1、item in(of) items

<ul id="example-1">
    <li v-for="item in items">
        {{item.message}}
    </li>
</ul>
var example1=new Vue({
    el:'#example-1',
    data:{
        item:[
            {message:'Foo'},
            {message:'Bar'}
        ]
    }
});

2、(item , index) in items

index表示当前项的索引

3、对多个标签使用循环(使用`<template>`)


<ul>
    <template v-for="item in items">
        <li>{{ item.msg }}</li>
        <li class="divider"></li>
    </template>
</ul>

二、对象迭代

v-for可对对象的属性进行迭代

1、v-for=”value in object”

<ul id="repeat-object" class="demo">
    <li v-for="value in object">
        {{ value }}
    </li>
</ul>
new Vue({
    el:'#repeat-object',
    data:{
        object:{
            FirstName:'john',
            LastName:'Doe',
            Age:30
        }
    }
});

2、v-for=”(value,key) in object”

第二个参数为key值

3、v-for=”(value,key,index) in object”

第三个参数为索引值

三、整数迭代

`<span v-for="n in 10">{{ n }}</span>`

四、组件

在组件中直接使用v-for不能将数据传到组件里，因为组件有自己独立的作用域。如果想传递到组件中，可以使用props。

<my-component v-for="(item,index) in items" 
              v-bind:item="item" 
              v-bind:index="index">
</my-component>

五、key

（待补充）

六、数组更新检测

数组有变异方法和重塑数组的方法。
变异方法修改数组本省、重塑数组则是创建了新的数组。
对于以下两种情况，Vue不能检测到数组变动：
1、vm.item[indexOfItem]=newValue
2、vm.item.length=newLength
对于1可以采用以下两种方式：
(1)Vue.set(example1.items,indexOfItem,newValue)
(2)example1.items.splice(indexOfItem,1,newValue)
对于2可以采用：example1.items.splice(newLength)

七、显示过滤／排序结果

可以使用数组的计算属性，或者采用方法处理数组来进行过滤或排序。

1、计算属性

<li v-for="n in evenNumbers">{
{n}}</li>
data:{
    numbers:[1,2,3,4,5]
},
computed:{
    evenNumbers:function(){
        return this.numbers.filter(funciton(number){
            return number % 2===0
        })
    }
}

2、method方法

<li v-for="n in even(numbers)">{{n}}</li>
data:{
    numbers:[1,2,3,4,5]
},
methods:{
    even:function(numbers){
        return numbers.filter(function(number){
            return number % 2===0
        })
    }
}