条件渲染
当我们需要根据不同的条件对前端页面进行不同的渲染时，我们就需要用到条件渲染。Vue 为我们提供了 v-if、v-else-if、v-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 之后：
网络异常，图片无法展示
|
输入其他值：
网络异常，图片无法展示
|
Tips
v-model实现了输入框内容和数据的绑定。v-if等实现了根据数据的不同值展示不同的内容。- 在
v-if模板中双引号内是单引号。
条件渲染的另一种方式
如上的形式是在页面中直接写上了 v-if 来进行条件判断，这样不是很优雅，我们尝试使用字典，根据不同的 key 来渲染不同的 value 来进行改造。
代码
<!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" placeholder="请输入正确的等级！(A,B,C,D)"> <br> <p>你输入的内容是：{{ type }}</p> <h2>{{ res[type] }}</h2> </div> <script> app = new Vue({ el: "#app", data: { type: "C", res: {"C":"及格","A":"优秀","B":"优良","D":"不及格"} } }) </script> </body> </html> 复制代码
页面效果
初始：
网络异常，图片无法展示
|
输入 A：
网络异常，图片无法展示
|
输入 D：
网络异常，图片无法展示
|
我们发现针对可以确定的条件和结果，使用字典的方式，页面代码更优雅。不过，v-if 使用起来也是非常不多呢！
以上就是今天的全部内容了，感谢您的阅读，我们下节再会。
