当我们获取到后台数据之后，会按照一定的规则加载到前端写好的模板中，显示在浏览 器中，这个过程称之为渲染。
条件渲染
1. v-if、v-else 和 v-else-if
<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8"/>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app" >
<!--if、else、指令-->
<p v-if="status==1">当status为1时，显示该行</p>
<p v-else-if="status==2">当status为2时，显示该行</p>
<p v-else-if="status==3">当status为3时，显示该行</p>
<p v-else>否则显示该行</p>
</div>
<!--script脚本-->
<script>
//创建vue实例
var vm=new Vue({
el: '#app',
data: {
status: 2
}
});
</script>
</body>
</html>
我们需要注意多个 v-if、v-else-if 和 v-else 之间需要紧挨着
2. v-show 实际上同 v-if 效果等同，当绑定事件的元素符合引号中的条件时，该元素才显示，代码 如下
<div id="app" > <!--if、else、指令-->
<p v-show="status==1">当 status 为 1 时，显示该行</p>
<p v-show="status==2">当 status 为 2 时，显示该行</p>
</div>
<script>
//创建 vue 实例
var vm=new Vue({
el: '#app',
data: {
status: 2
}
});
</script>
3. v-if 和 v-show 的区别
控制显示的方法不同：v-show 实际是通过修改 DOM 元素 的 display 属性来实现节点的显示和隐藏的，而 v-if 则是通过添加/删除 DOM 节点来实现的.
编译条件：v-if 是惰性的，只有在条件第一次变为真时才开始局部编译; v-show 是在不管初始条件是什么，都被编译， 然后被缓存，
性能消耗：v-if 有更高的切换消耗；v-show 有更高的初始渲染消耗；
使用场景：如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时 条件很少改变，当只需要一次显示或隐藏，则使用 v-if 较好。
Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染
<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8"/>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app" >
<p v-if="ok">
<label>Username</label>
<input placeholder="Enter your username">
</p>
<p v-else>
<label>Email</label>
<input placeholder="Enter your email address">
</p>
<button @click="ok=!ok">切换</button>
</div>
<script type="text/javascript">
var vm=new Vue({
el: '#app',
data: {
ok: true,
}
})
</script>
</body>
</html>
页面中输入信息后点击切换按钮时，文本框里的内容并没有清空。
Vue 为我们提供了一种方式来声明“这两个元素是完全独立的—不要复用它们”。只 需添加一个具有唯一值的 key 属性即可，代码如下：
<div id="app" >
<p v-if="ok">
<label>Username</label>
<input placeholder="Enter your username"key="username-input">
</p>
<p v-else>
<label>Email</label>
<input placeholder="Enter your email address" key="email-input">
</p>
<button @click="ok=!ok">切换</button>
</div>
列表渲染
1.v-for 循环用于数组
v-for 指令根据一组数组的选项列表进行渲染。
对数组选项进行列表渲染
<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8"/>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<ul id="app">
<li v-for="item in items">
{{ item.name }}
</li>
</ul>
<script type="text/javascript">
var vm= new Vue({
el: '#app',
data: {
items: [
{ name: 'beixi' },
{ name: 'jzj' },
{ name: 'beixi' },
{ name: 'jzj' },
{ name: 'beixi' },
{ name: 'jzj' },
{ name: 'beixi' },
{ name: 'jzj' }
]
}
})
</script>
</body>
</html>
v-for 还支持一个可选的第二个参数为当前项的索引，索引从 0 开始，代码如下：
<ul id="app">
<li v-for="(item，index) in items">
{{index}}-- {{ item.name }}
</li>
</ul>
v-for 来遍历对象
<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8"/>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<ul id="app">
<li v-for="value in object">
{{ value }}
</li>
</ul>
<script type="text/javascript">
var vm=new Vue({
el: '#app',
data: {
object: {
name: 'beixi',
gender: '男',
age: 30
}
}
})
</script>
</body>
</html>
v-for 用于整数
<ul id="app">
<li v-for="n in 10">
{{n}}
</li>
</ul>
<script type="text/javascript">
var vm=new Vue({
el: '#app',
})
</script>
template 标签用法
Vue 提供了内置标签<template>，可以将多个元素进行渲染,代码如下：
<div id="app">
<div v-if="ok">
<p>这是第一段代码</p>
<p>这是第二段代码</p>
<p>这是第三段代码</p>
</div>
</div>
<script type="text/javascript">
var vm=new Vue({
el: '#app',
data:{
ok:true
}
})
</script>
同样，<template>标签也支持使用 v-for 指令，用来渲染同级的多个兄弟元素，代码如 下：
<ul id="app">
<template v-for="item in items">
{ { item . name } }
{ { item.age }}
</template>
</ul>
<script type="text/javascript">
var vm=new vue ( {
el: '#app ',
data: {
items: [
{ name : 'beixi' },
{ age: 18 }
]
}
})
</script>