背景
你可能已经知道 Vue 中有两个条件渲染方法，即 v-if 和 v-show，那么对于他两有什么却别和使用场景呢？今天我们就一起来看下。
实践
v-if
特点
- 真条件渲染（即要什么给什么）
- 开销大
- 适合低频操作
- 节省内存
- 可以处理
else
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> <title>Document</title> </head> <body> <div id="app"> 请输入成绩等级：<input v-model="type"> <br> <p>你输入的内容是：{{ type }}</p> <div v-if="type=='C'"> <h1>及格</h1> </div> <div v-else-if="type=='A'"> <h1>优秀</h1> </div> <div v-else> <h1>不及格</h1> </div> </div> <script> app = new Vue({ el: "#app", data: { type: "C" } }) </script> </body> </html> 复制代码
页面效果
初始：
网络异常，图片无法展示
|
输入 A：
网络异常，图片无法展示
|
v-show
特点
- 假条件渲染（即一次全部给）
- 开销小
- 适合高频操作
- 费内存
- 无法处理 else
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> <title>Document</title> </head> <body> <div id="app"> 请输入成绩等级：<input v-model="type"> <br> <p>你输入的内容是：{{ type }}</p> <div v-show="type=='C'"> <h1>及格</h1> </div> <div v-show="type=='A'"> <h1>优秀</h1> </div> <div v-show="type=='D'"> <h1>不及格</h1> </div> </div> <script> app = new Vue({ el: "#app", data: { type: "C" } }) </script> </body> </html> 复制代码
页面效果
初始：
网络异常，图片无法展示
|
输入 A：
网络异常，图片无法展示
|
以上就是今天的全部内容了，感谢您的阅读，我们下节再会。
