一、Vue的条件渲染
1.1.v-if
⭐⭐
if 顾名思义，就是如果满足一个条件后，执行下面的步骤，和我们学的基础语法是一样的，只是这里在Vue中稍微换了一下而已
v-if=“条件” if后面的内容只有在条件为true时，才会被渲染出来
<div class="info" v-if="Object.keys(info).length">
<h2>个人信息</h2>
<ul>
<li>姓名：{{info.name}}</li>
<li>年龄:{{info.age}}</li>
</ul>
</div>
v-if的渲染原理：
- v-if是惰性的；
- 当条件为false时，其判断的内容完全不会被渲染或者会被销毁掉；
- 当条件为true时，才会真正渲染条件块中的内容；
1.2.v-if-else
⭐⭐
v-if-else
我们可以想到 基础语法的 if else
没错也是一样的道理
v-if=“条件” 如果条件不满足，执行else
<div class="info" v-if="Object.keys(info).length">
<h2>个人信息</h2>
</div>
<div v-else>
<h2>没有输入个人信息</h2>
</div>
1.3.v-else-if
⭐⭐
v-else-if 和if搭配使用
且v-else-if可以使用多次（一般用于多种情况下）
v-else-if 只能和if在一起使用
<h1 v-if="score > 90">优秀</h1>
<h2 v-else-if="score > 80">良好</h2>
<h2 v-else-if="score >= 60">及格</h2>
<h2 v-else>不及格啦</h2>
1.4.template元素
⭐⭐
template：模板的意思
当我们不想让div这种元素被渲染的时候，可以使用template
因为template是作为占位符，用于包裹元素，自身并没有被渲染出来
注意点：每个组件根template （最外层的template）只能有一个子元素，非根template没有限制。
template元素可以当做不可见的包裹元素，并且在v-if上使用，但是最终template不会被渲染出来：
<template v-if="Object.keys(info).length">
<h2>个人信息</h2>
<ul>
<li>姓名：{{info.name}}</li>
<li>年龄:{{info.age}}</li>
</ul>
</template>
<template v-else>
<h2>没有输入个人信息</h2>
</template>
1.5.v-show
⭐⭐
v-show的用法和v-if一样
<div v-show="isShowCode">
<img
src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu\_juejin\_web/img/app\_download\_QR.cbe9f32.png"
alt=""
/>
</div>
### 最后
在面试前我花了三个月时间刷了很多大厂面试题，最近做了一个整理并分类，主要内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。
包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。
* HTML5新特性，语义化
* 浏览器的标准模式和怪异模式
* xhtml和html的区别
* 使用data-的好处
* meta标签
* canvas
* HTML废弃的标签
* IE6 bug，和一些定位写法
* css js放置位置和原因
* 什么是渐进式渲染
* html模板语言
* meta viewport原理
**开源分享：https://docs.qq.com/doc/DSmRnRGxvUkxTREhO**
