vue里面的v-for列表循环

verano 发布于2019-08-20 19:05 / 399人阅读

摘要：取到里面的偶数位的值在计算属性不适用的情况下例如，在嵌套循环中你可以使用一个方法一段取值范围的也可以取整数。

列表渲染 v-for

v-for可以把数据中的一个数组对应为一组元素
v-for 指令需要以 item in items 形式的特殊语法， items 是源数据数组并且 item 是数组元素迭代的别名。

{{item.text}}

data:{
    items:[
        {text:"第一组"}，
        {text:"第二组"}，
        {text:"第三组"}，
    ]
}

输出HTML

第一组
第二组
第三组

在 v-for 块中，我们拥有对父作用域属性的完全访问权限。 v-for 还支持一个可选的第二个参数为当前项的索引。


    {{ index }} - {{ item.text }}

输出HTML

1 - 第一组
2 - 第二组
3 - 第三组

你也可以用 of 替代 in 作为分隔符，因为它是最接近 JavaScript 迭代器的语法：


    {{ item.text }}

一个对象的 v-for

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


    {{item}}

data:{
    items:{
        text1:"第一组",
        text2:"第二组",
        text3:"第三组",
    }
}

输出HTML

第一组
第二组
第三组

你也可以提供第二个的参数为键名：


    {{key}} : {{item}}

输出HTML

text1 : 第一组
text2 : 第二组
text3 : 第三组

第三个参数为索引：


    {{index}} . {{key}} : {{item}}

输出HTML

0 . text1 : 第一组
1 . text2 : 第二组
2 . text3 : 第三组

key

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用 “就地复用” 策略。如果数据项的顺序被改变，Vue将不是移动 DOM 元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。这个类似 Vue 1.x 的 track-by="$index" 。

这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态（例如：表单输入值）的列表渲染输出。

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的且唯一的 id。这个特殊的属性相当于 Vue 1.x 的 track-by ，但它的工作方式类似于一个属性，所以你需要用 v-bind 来绑定动态值（在这里使用简写）：

建议尽可能使用 v-for 来提供 key ，除非 DOM 内容遍历起来非常简单，或者你是有意识的要依赖于默认行为以便获得性能提升。
因为它是 Vue 识别节点的一个通用机制， key 并不特别与 v-for 关联，key 还具有其他用途，我们将在后面的指南中看到其他用途。

一个组件的v-for

2.2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的。

在自定义组件里，你可以像任何普通元素一样用 v-for 。

Vue.component("mycom", {
  template: "疯狂的石头"
})
var vm = new Vue({
    el:"#box",
    data:{
        todo:[
            {text:1,ok:true},
            {text:2,ok:false},
            {text:3,ok:true},   
        ]  
    }   
})

疯狂的石头
疯狂的石头
疯狂的石头

但是我们又如何将数据渲染到我们的组件中呢？现在我们就需要绑定一个属性，属性需要在组件中注册

Vue.component("mycom", {
  template: "疯狂的石头{{this.lie}}",
  props:["lie"]
})
var vm = new Vue({
    el:"#box",
    data:{
        todo:[
            {text:1,ok:true},
            {text:2,ok:false},
            {text:3,ok:true},   
        ]  
    }   
})

输出HTML

疯狂的石头1
疯狂的石头2
疯狂的石头3

v-for 与 < template >

我们也可以使用 v-for 来渲染 < template >标签。例如:

data:{
    todo:[
        {text:1,ok:true},
        {text:2,ok:false},
        {text:3,ok:true},   
    ]  
}

输出HTML

1
2
3

数组更新检测 变异方法

变异方法(mutation method)，顾名思义，会改变被这些方法调用的原始数组。

Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：
push()
pop()
shift()
unshift()
splice()
sort()
reverse()

非变异方法

相非变异(non-mutating method)方法，例如： filter(), concat() 和 slice() 。这些不会改变原始数组，但总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组：

example1.items = example1.items.filter(function (item) {
    return item.message.match(/Foo/)
})

你可能认为这将导致 Vue 丢弃现有 DOM 并重新渲染整个列表。幸运的是，事实并非如此。 Vue 为了使得 DOM 元素得到最大范围的重用而实现了一些智能的、启发式的方法，所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。

注意事项

由于 JavaScript 的限制， Vue 不能检测以下变动的数组：

当你利用索引直接设置一个项时，例如： vm.items[indexOfItem] = newValue

当你修改数组的长度时，例如： vm.items.length = newLength

为了解决第一类问题，以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果，同时也将触发状态更新：

Vue.set(example1.items, indexOfItem, newValue)
// Array.prototype.splice
example1.items.splice(indexOfItem, 1, newValue)

为了解决第二类问题，你可以使用 splice：

example1.items.splice(newLength)

对象更新检测

我们可以用以下三种方法对对象进行更新：

如果你需要为对象属性之中添加新的属性，那么我么你可以利用以下两种方法

Vue.set("目标对象","属性","值")
vm.$set("目标对象","属性","值")

如果我们想更新对象中的属性，以下这种方法可以满足你

this.userProfile = Object.assign({}, this.userProfile, {
    age: 27,
    favoriteColor: "Vue Green"
})

this.userProfile   //对象本身的属性

Object.assign()    //es6新增加的方法，用来将源对象的所有可枚举属性，复制到目标对象。它至少需要两个对象作为参数，第一个参数是目标对象，后面的参数都是源对象

{}                 //你需要增加的属性

如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性。

注意！我们不更改根属性的属性，只能更改跟属性以下的子属性的属性

显示过滤 / 排序结果

有时，我们想要显示一个数组的过滤或排序副本，而不实际改变或重置原始数据。在这种情况下，可以创建返回过滤或排序数组的计算属性。


{{ n }}

data: {
    numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
    evenNumbers: function () {
        return this.numbers.filter(function (number) {
        return number % 2 === 0
        })
    }
}

在计算属性不适用的情况下 (例如，在嵌套 v-for 循环中) 你可以使用一个 method 方法：

{{ n }}

data: {
    numbers: [ 1, 2, 3, 4, 5 ]
},
methods: {
    even: function (numbers) {
        return numbers.filter(function (number) {
        return number % 2 === 0
        })
    }
}

一段取值范围的 v-for

v-for 也可以取整数。在这种情况下，它将重复多次模板。


    {{ n }}

输出HTML

1 2 3 4 5 6 7 8 9 10

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85124.html

Vue 2 | Part 5 列表渲染和事件监听

之前在vue里面绑定数据，都只是单个地绑定。这期我们来看一下怎样渲染列表，然后通过事件监听方法往列表里面增加item。列表渲染废话不多说，直接上代码： {{ item }} var app = new Vue({ el: #app, data: { list: [ ...

Nekron 2019-08-20 13:55 评论0 收藏0
Vue 的条件渲染和列表渲染

摘要：条件渲染上一篇与绑定下一篇的事件处理方法在中配合渲染一整组在使用控制元素的时候，我们需要将它添加到这个元素上去。最终的渲染结果不会包含元素。渲染如下列表渲染使用把一个数组对应为一组元素我们用指令根据一组数组的选项列表进行渲染。条件渲染上一篇：Class 与 Style 绑定：https://segmentfault.com/a/11...下一篇：Vue的事件处理方法：https:/...

go4it 2019-08-20 19:06 评论0 收藏0
vue从创建到完整的饿了么（5）v-for，v-bind与计算属性

摘要：的命令都用来开头。用来绑定属性。排序思路重新创建一个，键名是从到，键值就是获取的数据的键值。计算函数写在哪一种方法是写在生命周期的数据请求里，直接返回一个处理好的，但咱们用另一种方法计算属性。把这个加到城市名字的上即可解决。说明 1.上一章--Home.vue及vue-resource使用2.cangdu大神的项目源码地址--Github地址3.接口地址--Github地址4.UI框...

james 2019-08-20 18:58 评论0 收藏0
Vue 列表渲染

摘要：列表渲染用把一个数组对应为一组元素我们用指令根据一组数组的选项列表进行渲染。你也可以用替代作为分隔符把对象属性渲染列表你也可以提供第二个的参数为键名第三个参数为索引渲染组件列表自定义组件里，你可以像任何普通元素一样用。列表渲染用v-for把一个数组对应为一组元素我们用 v-for 指令根据一组数组的选项列表进行渲染。 v-for 指令需要以 item in items 形式的特殊...

ChanceWong 2019-08-20 19:06 评论0 收藏0
Vue.js第五课循环语句

摘要：循环使用指令。指令需要以形式的特殊语法，是源数据数组并且是数组元素迭代的别名。循环使用 v-for 指令。 v-for 指令需要以 item in items 形式的特殊语法， items 是源数据数组并且 item 是数组元素迭代的别名。 v-for 可以绑定数据到数组来渲染一个列表：v-for 指令 {{ site.name }} new Vue({ el: #a...

plus2047 2019-06-27 16:34 评论0 收藏0