前情回顾
上一节我们讲解了vue的一些设计思想，记住最重要的两点：双向数据绑定以及组件化思维。现在不太理解没关系，在后面的课程中，我们会慢慢发现这些重要思想的优点。
条件渲染（v-if，v-show）
在vue里，控制切换一个元素是否显示非常简单。
如下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello World</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app" v-if="show">
{{content}}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
content: 'hello world',
show: true
}
})
</script>
</body>
</html>
运行结果：
浏览器中正常显示hello world。但是如果在控制台输入app.show = false，显示内容就会消失。
代码解析：
- 我们使用了新的vue语法v-if，它的作用是将v-if的值绑定到data属性show中，如果show为true，内容显示。如果show为false，内容消失。这就是所谓的条件渲染。
- 在vue里还有一个条件渲染的语法v-show，它的用法与v-if差不多，不同的是带有
v-show的元素始终会被渲染并保留在 DOM 中。v-show只是简单地切换元素的 CSS 属性display。 - v-if是真正的条件渲染，所有条件内的监听器及子组件都会被销毁，而v-show只是简单的切换元素的css属性。一般来说，
v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好；如果在运行时条件很少改变，则使用v-if较好。
循环渲染（v-for）
1.v-for可以用来循环一个数组。如下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>v-for的用法</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in list">
姓名：{{item.name}}，年龄：{{item.age}}
</li>
</ul>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
list: [{name: "Andy", age: 24},
{name: "Dell", age: 28}]
}
})
</script>
</body>
</html>
运行结果：
姓名：Andy，年龄：24姓名：Dell，年龄：28
代码解析：
- 第20行在data里添加了一个list数组，包含了两个对象
- 第10-14行代码里，用ul标签表示一个列表，在li标签里使用v-for指令，循环list数组。
- v-for指令的语法：
v-for指令需要使用item in items形式的特殊语法，其中items是源数据数组，而item则是被迭代的数组元素的别名。 - v-for还支持一个可选的第二个参数，表示当前的索引。
item in list可以写成（item, index）in list
2.v-for指令还可以循环一组对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello World</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="value in object">
{{value}}
</li>
</ul>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
object: {
title: 'This is title',
anthor: 'Dell Lee',
date: '2019-11-27'
}
}
})
</script>
</body>
</html>
运行结果：
This is title
Dell Lee
2019-11-27
代码解析：
-
你也可以提供第二个的参数为 property 名称 (也就是键名)：
<li v-for="(value, name) in object"> {{name}}:{{value}} </li>title: This is title
anthor: Dell Lee
date: 2019-11-27 - 还可以用第三个参数index作为索引，与数组循环一样。
值得注意的问题：
建议尽可能在使用 v-for 时提供 key attribute。这节先不讲解原因，以及v-bind指令的语法，先记住，在真正的项目开发中，使用v-for，都是这样需要提供key attribute。
<ul>
<li v-for="(item, index) in list" v-bind:key="item.index">
姓名：{{item.name}}，年龄：{{item.age}}
</li>
</ul>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。