vue笔记4-vue列表渲染-vue-ArcherWong博客

vue笔记4-vue列表渲染

作者：ArcherWong
分类：vue
时间：2019-01-03 21:38:16
阅读：301

[TOC]

# 1. v-for

## 1.1 遍历数组

```
//item=>值，index=>索引
<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ index }} - {{ item.message }}
  </li>
</ul>
```
```
var example2 = new Vue({
  el: '#example-2',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})
```
```
//结果
0-Foo
1-Bar
```

## 1.2 遍历对象
```
//完整模式，value=>值，key=>键名，index=>索引
<div v-for="(value, key, index) in object">
  {{ index }}. {{ key }}: {{ value }}
</div>
```
```
new Vue({
  el: '#v-for-object',
  data: {
    object: {
      firstName: 'John',
      lastName: 'Doe',
      age: 30
    }
  }
})
```
```
//结果
0.firstName:John
1.lastName:Doe
2.age:30
```

## 1.3 key

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略.

建议尽可能在使用 v-for 时提供 key，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。
```
<div v-for="item in items" :key="item.id">
  
</div>
```

# 2. 数组更新检测

## 2.1 变异方法：使用这些方法会改变原始数组，并且会触发视图更新

- push()
- pop()
- shift()
- unshift()
- sort()
- reverse()
- splice()

```
//splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。

arrayObject.splice(index,howmany,item1,.....,itemX)

//index	必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
//howmany	必需。要删除的项目数量。如果设置为 0，则不会删除项目。
//item1, ..., itemX	可选。向数组添加的新项目。

//例子
<script type="text/javascript">

var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"

//操作
//1. 
arr.splice(2,0,"William")
//2. 
arr.splice(2,1,"William")
//3. 
arr.splice(2,3,"William")

//arr结果
//1. George,John,William,Thomas,James,Adrew,Martin  //在index=2位置添加william
//2. George,John,William,James,Adrew,Martin   //删除index=2的原有元素，添加新元素
//3. George,John,William,Martin   //从index=2位置删除掉3个元素，再添加新元素

</script>

```

## 2.2 非变异方法：不会改变原始数组，会返回一个新的数组。例如

- filter()
- concat()

```
//简单理解为合并数组
var arr = [`大漠`,'30','W3cplus'];
console.log(arr); // ["大漠", "30", "W3cplus"]
var arr2 = arr.concat('Blog','2014');
console.log(arr2); // ["大漠", "30", "W3cplus", "Blog", "2014"]

//同时传递一个或多个数组
var arr = ["大漠","30"];
console.log(arr); // ["大漠", "30"]
var arr2 = arr.concat(1,["blog","w3cplus"],["a","b","c"]);
console.log(arr2); // ["大漠", "30", 1, "blog", "w3cplus", "a", "b", "c"]

//还可以传递空值，只是复制数组并返回一个副本
var arr = [1,2];
console.log(arr); // [1, 2]
var arr2 = arr.concat();
console.log(arr2); // [1, 2]
```
- slice()

```
//slice() 方法可从已有的数组中返回选定的元素。

arrayObject.slice(start,end)

//start	必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。
//end	可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。

```

使用非变异方法，使用生成的新数组替换原数组不会导致 Vue 丢弃现有 DOM 并重新渲染整个列表，因为vue使用了一些智能启发式的方法。

## 2.3 注意事项

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

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

解决方法

```
// 方法1 Vue.set
Vue.set(example1.items, indexOfItem, newValue)

// 方法2 Array.prototype.splice
example1.items.splice(indexOfItem, 1, newValue)
```

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

解决方法

```
example1.items.splice(newLength)
```

## 2.4 还是由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除：

还是由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除：

```
var vm = new Vue({
  data: {
    a: 1
  }
})
// `vm.a` 现在是响应式的

vm.b = 2
// `vm.b` 不是响应式的
```
对于已经创建的实例，Vue 不能动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。例如，对于：
```
var vm = new Vue({
  data: {
    userProfile: {
      name: 'Anika'
    }
  }
})
```
你可以添加一个新的 age 属性到嵌套的 userProfile 对象：

Vue.set(vm.userProfile, 'age', 27)
你还可以使用 vm.$set 实例方法，它只是全局 Vue.set 的别名：

vm.$set(this.userProfile, 'age', 27)
    
如果想复制多个属性

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

//Object.assign方法的第一个参数 (这里是'{}') 是目标对象，后面的参数都是源对象。
```

## 2.5 显示过滤/排序结果
有时，我们想要显示一个数组的过滤或排序副本，而不实际改变或重置原始数据。在这种情况下，可以创建返回过滤或排序数组的计算属性。
例如：
```
<li v-for="n in evenNumbers">{{ n }}</li>
data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
  evenNumbers: function () {
    return this.numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}
```
在计算属性不适用的情况下 (例如，在嵌套 v-for 循环中) 你可以使用一个 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
    })
  }
}
```

## 2.6 v-for

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

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

//用在组件上
<my-component v-for="item in items" :key="item.id"></my-component>
```

## 2.7  v-for with v-if

当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你想为仅有的一些项渲染节点时，这种优先级的机制会十分有用，如下：
```
<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo }}
</li>
```
上面的代码只传递了未 complete 的 todos。
而如果你的目的是有条件地跳过循环的执行，那么可以将 v-if 置于外层元素 (或 `<template>`)上。如：
```
<ul v-if="todos.length">
  <li v-for="todo in todos">
    {{ todo }}
  </li>
</ul>
<p v-else>No todos left!</p>
```

标签：

上一篇：vue笔记3-vue条件渲染

下一篇：vue笔记6-事件处理

vue笔记4-vue列表渲染

文章分类

阅读排行

友情链接