（1）在components文件夹下新建一个Ifdemo.vue文件。
（2）然后在文件中编写如下内容，即写入一个标题
<template>
<h3>条件渲染</h3>
</template>
<script>
</script>
（3）此时如果想在页面显示，只需要在App.vue中增加如下内容
（4）然后运行在浏览器中就可以看到IfDemo.vue中的内容了
（5）修改IfDemo.vue中的代码使用v-if设置条件渲染，如下所示
<template>
<h3>条件渲染</h3>
<div v-if="flag">你能看到我吗</div>
</template>
<script>
export default {
data(){
return {
flag:true
}
}
}
</script>
此时浏览器是能看到的，因为此时flag为true，可以尝试一下将flag设置为false，然后浏览器就看不到这句话了。
（6）v-if和v-else一起用的方法如下所示
<template>
<h3>条件渲染</h3>
<div v-if="flag">你能看到我吗</div>
<div v-else>你看不到我了</div>
</template>
<script>
export default {
data(){
return {
flag:false
}
}
}
</script>
此时因为flag设置为false，所以这里会显示v-else的内容
（7）v-if,v-else-if,v-else 一起使用的方法如下所示
<template>
<h3>条件渲染</h3>
<div v-if="flag">你能看到我吗</div>
<div v-else>你看不到我了</div>
<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'">B</div>
<div v-else-if="type === 'C'">C</div>
<div v-else>Not A B C</div>
</template>
<script>
export default {
data(){
return {
flag:false,
type: "D"
}
}
}
</script>
此时的执行结果如下图所示
扫描二维码关注公众号，回复：
15496634 查看本文章
（8）此外，还可以通过v-shwo设置是否显示，如下所示
<template>
<h3>条件渲染</h3>
<div v-if="flag">你能看到我吗</div>
<div v-else>你看不到我了</div>
<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'">B</div>
<div v-else-if="type === 'C'">C</div>
<div v-else>Not A B C</div>
<div v-show="flag">你能看到我吗</div>
</template>
<script>
export default {
data(){
return {
flag:true,
type: "D"
}
}
}
</script>
这里把flag设置为true了，所以会显示出来
（9）v-if和v-shwo的比较
-
v-if 是真实的按条件渲染，因为它确保了在切换时，条件区内的事件监听器和子组件都会被销毁与重建
-
v-if 也是惰性的，如果在初次渲染时条件为false，则不会做任何事，条件区块只有当条件首次变为true时才会被渲染
-
v-shwo简单许多，元素无论初始条件如何，都会被渲染，只有CSS display属性会被切换
-
总体来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销，因此，如果需要频繁切换，则使用v-shwo较好，如果在运行时绑定条件很少变化，则v-if更合适