1. **v - if指令**
- **基本概念**
- `v - if`是一个指令，用于根据表达式的值来条件性地渲染一个元素块。如果表达式的值为真，元素块会被渲染到DOM中；如果表达式的值为假，元素块将不会被渲染。
- **基本用法**
- 例如，在一个Vue组件中，有一个布尔型的数据属性`isVisible`，可以根据这个属性来决定是否渲染一个`<div>`元素。
```javascript
export default {
data() {
return {
isVisible: true
};
}
};
```
```vue
<template>
<div>
<div v - if="isVisible">
这个元素是可见的。
</div>
</div>
</template>
```
- 当`isVisible`为`true`时，内部的`<div>`元素会被渲染到DOM中，用户可以看到其中的内容；当`isVisible`为`false`时，这个`<div>`元素不会被渲染，在DOM中不存在。
- **多个条件分支（v - else - if和v - else）**
- 可以使用`v - else - if`和`v - else`来创建多个条件分支。例如，根据一个数字类型的数据属性`score`来显示不同的评价。
```javascript
export default {
data() {
return {
score: 75
};
}
};
```
```vue
<template>
<div>
<div v - if="score >= 90">
优秀
</div>
<div v - else - if="score >= 70">
良好
</div>
<div v - else - if="score >= 60">
合格
</div>
<div v - else>
不合格
</div>
</div>
</template>
```
- 这里根据`score`的值，会渲染不同的`<div>`元素来显示对应的评价。
- **在`<template>`标签中使用**
- `v - if`可以在`<template>`标签中使用，用于包裹多个元素，实现条件性地渲染一组元素。例如：
```vue
<template>
<div>
<template v - if="isLoggedIn">
<p>欢迎回来，用户！</p>
<button>注销</button>
</template>
<template v - else>
<p>请先登录。</p>
<button>登录</button>
</template>
</div>
</template>
```
- 当`isLoggedIn`为`true`时，会渲染包含欢迎信息和注销按钮的模板；当`isLoggedIn`为`false`时，会渲染包含登录提示和登录按钮的模板。
2. **v - show指令**
- **基本概念**
- `v - show`指令也用于控制元素的显示和隐藏，但与`v - if`不同的是，`v - show`是通过改变元素的`display`属性来实现的。当表达式的值为真时，元素的`display`属性被设置为正常显示的值（如`block`、`inline`等）；当表达式的值为假时，元素的`display`属性被设置为`none`，从而隐藏元素。
- **基本用法**
- 同样以`isVisible`属性为例，使用`v - show`来控制元素的显示和隐藏。
```javascript
export default {
data() {
return {
isVisible: true
};
}
};
```
```vue
<template>
<div>
<div v - show="isVisible">
这个元素是可见的。
</div>
</div>
</template>
```
- 当`isVisible`为`true`时，元素正常显示；当`isVisible`为`false`时，元素通过`CSS`的`display`属性被隐藏，但在DOM中仍然存在。
- **与v - if的比较**
- **性能方面**：`v - if`在切换条件时会有更高的性能开销，因为它涉及到元素的创建和销毁。如果一个元素在切换过程中需要频繁地显示和隐藏，`v - show`可能是更好的选择，因为它只是简单地改变元素的`CSS`属性，不会频繁地创建和销毁DOM元素。
- **初始渲染方面**：如果一个元素在初始状态下不太可能被显示，`v - if`可能更合适，因为它不会渲染不必要的元素，从而减少初始加载时的DOM大小和渲染成本。例如，对于一个只有在用户满足某些高级权限才会显示的功能模块，使用`v - if`可以避免不必要的渲染。