阅读本文约需要10分钟，您可以先关注我们，避免下次无法找到。
本篇文章成哥继续带大家来学习前端VUE教程，今天主要讲解VUE的循环渲染等知识点。下面我们就一起来学习该块内容吧！
01 v-for遍历数组
我们可以用v-for指令基于一个数组来渲染一个列表。v-for指令需要使用item in items 形式的特殊语法，其中items是源数据数组，而 item 则是被迭代的数组元素的别名。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>VUE基础教程</title>
<!-- 引用vue.js文件 -->
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!-- 通过v-for实现列表渲染 -->
<li v-for="item in items" :key="item.message">
{{ item.message }}
</li>
</div>
<script>
var vm = new Vue({
el: '#app', // dom的挂载点,这边将dom挂载到id为app的标签上
data: { // 数据对象
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
},
})
</script>
</body>
</html> 在v-for块中，我们可以访问所有父作用域的property。v-for还支持一个可选的第二个参数，即当前项的索引。具体示例如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>VUE基础教程</title>
<!-- 引用vue.js文件 -->
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!-- 通过v-for实现列表渲染,同时加入两个参数一个获取索引值一个获取内容 -->
<li v-for="(item, index) in items" :key="item.message">
{{index}} - {{ item.message }}
</li>
</div>
<script>
var vm = new Vue({
el: '#app', // dom的挂载点,这边将dom挂载到id为app的标签上
data: { // 数据对象
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
},
})
</script>
</body>
</html> 也可以用of替代in作为分隔符，因为它更接近JavaScript迭代器的语法，具体示例如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>VUE基础教程</title>
<!-- 引用vue.js文件 -->
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!-- 通过v-for实现列表渲染,用of代替in更符合js的迭代语法 -->
<li v-for="(item, index) of items" :key="item.message">
{{index}} - {{ item.message }}
</li>
</div>
<script>
var vm = new Vue({
el: '#app', // dom的挂载点,这边将dom挂载到id为app的标签上
data: { // 数据对象
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
},
})
</script>
</body>
</html> 02 v-for遍历对象
在开发过程中，我们也会遇到需要遍历对象中的值，vue的v-for就提供了该功能，但要注意的是在遍历对象时，会按Object.keys()的结果遍历，但是不能保证它的结果在不同的 JavaScript引擎下都一致。通过v-for遍历对象示例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>VUE基础教程</title>
<!-- 引用vue.js文件 -->
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!-- 通过v-for遍历对象, value就是获取对象的属性值 -->
<li v-for="value in object">
{{ value }}
</li>
</div>
<script>
var vm = new Vue({
el: '#app', // dom的挂载点,这边将dom挂载到id为app的标签上
data: { // 数据对象
object: {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10'
}
},
})
</script>
</body>
</html> 同样v-for在遍历对象时也可以传入两个参数，同时获取属性的key与value，具体示列如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>VUE基础教程</title>
<!-- 引用vue.js文件 -->
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!-- 通过v-for遍历对象, 同时遍历出对象属性的key与value值 -->
<li v-for="(value, key) in object">
{{key}} : {{ value }}
</li>
</div>
<script>
var vm = new Vue({
el: '#app', // dom的挂载点,这边将dom挂载到id为app的标签上
data: { // 数据对象
object: {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10'
}
},
})
</script>
</body>
</html> v-for在遍历对象时还可以加入第三个参数，第三个参数一般获取对象属性的索引值，但由于对象是没有顺序的所以遍历的顺序不一定每次都相同
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>VUE基础教程</title>
<!-- 引用vue.js文件 -->
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!-- 通过v-for遍历对象, 加入索引值的遍历 -->
<li v-for="(value, key, index) in object">
{{index}}. {{key}} : {{ value }}
</li>
</div>
<script>
var vm = new Vue({
el: '#app', // dom的挂载点,这边将dom挂载到id为app的标签上
data: { // 数据对象
object: {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10'
}
},
})
</script>
</body>
</html> 03 数组更新检测
我们在对vue的数组数据更新时，可以使用一些方法来促使视图的更新，这些方法主要分为两类一类是变更方法一个是非变更方法
（1）变更方法（变异方法）
Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：
a. push()
b. pop()
c. shift()
d. unshift()
e. splice()
f. sort()
g. reverse()
上面这些数组操作方法，会直接改变原始数组称为变异方法，会促使视图自动更新。
（2）非变更方法（替换方法）
除了上面的变更方法js还有非变更方法，如filter()、concat()和slice()。它们不会变更原始数组，而总是返回一个新数组。当使用非变更方法时，可以用新数组替换旧数组：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>VUE基础教程</title>
<!-- 引用vue.js文件 -->
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in items" :key="item.message">
{{ item.message }}
</li>
</ul>
<button @click="replaceList">点击我</button>
</div>
<script>
var vm = new Vue({
el: '#app', // dom的挂载点,这边将dom挂载到id为app的标签上
data: { // 数据对象
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
},
methods: {
// 通过filter来对数据元素进行过滤，然后生成新的数组来替换原来的数据
replaceList(){
this.items = this.items.filter(function (item){
return item.message.match(/Foo/)
})
}
}
})
</script>
</body>
</html> 你可能认为这将导致 Vue 丢弃现有 DOM 并重新渲染整个列表。幸运的是，事实并非如此。Vue 为了使得 DOM 元素得到最大范围的重用而实现了一些智能的启发式方法，所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。
04 v-for中过滤或排序
有时，我们想要显示一个数组经过过滤或排序后的版本，而不实际变更或重置原始数据。通常场景中我们可以通过计算属性属性，但在v-for语句中我们就可以在v-for中调用方法来实现，示列如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>VUE基础教程</title>
<!-- 引用vue.js文件 -->
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<ul v-for="set in sets">
<!-- 在v-for中调用even方法实现过滤 -->
<li v-for="n in even(set)">{{ n }}</li>
</ul>
</div>
<script>
var vm = new Vue({
el: '#app', // dom的挂载点,这边将dom挂载到id为app的标签上
data: { // 数据对象
sets: [[ 1, 2, 3, 4, 5 ], [6, 7, 8, 9, 10]]
},
methods: {
even(numbers){
// 将数组的偶数过滤出来组成新的数组然后返回
return numbers.filter(function (number) {
return number % 2 === 0
})
}
}
})
</script>
</body>
</html> 05 v-for生成数值
v-for 也可以接受整数。在这种情况下，它会把模板重复对应次数，具体示列如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>VUE基础教程</title>
<!-- 引用vue.js文件 -->
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!-- v-for可以对一个整数进行遍历生成数值范围 -->
<span v-for="n in 10">{{ n }} </span>
</div>
<script>
var vm = new Vue({
el: '#app', // dom的挂载点,这边将dom挂载到id为app的标签上
data: { // 数据对象
},
})
</script>
</body>
</html> 06 v-for与v-if一起使用
当v-for与v-if处于同一节点，v-for的优先级比v-if更高，这意味着v-if将分别重复运行于每个v-for循环中。当你只想为部分项渲染节点时，这种优先级的机制会十分有用，如下，下面的代码将只渲染未完成的 todo。
<li v-for="todo in todos" v-if="!todo.isComplete">
{{ todo }}
</li> 如果在循环前加判断可以将v-if置于外层元素上如下所示
<!-- 在循环前判断todos是否为空如果为空则不循环 -->
<ul v-if="todos.length">
<li v-for="todo in todos">
{{ todo }}
</li>
</ul>
<p v-else>No todos left!</p> 07 总结
至此我们《VUE基础教程五》就讲完了，下篇内容主要讲解VUE的事件处理相关知识，敬请期待。最后如果喜欢本篇文章不要忘了点赞、关注与转发哦！
-END-
@IT管理局专注计算机领域技术、大学生活、学习方法、求职招聘、职业规划、职场感悟等类型的原创内容。期待与你相遇，和你一同成长。
文章推荐：