Vue基础班03课 条件渲染
示例：根据条件渲染两个组件中的一个
在真实的开发，我们经常会遇到需要根据条件，渲染两种数据中其中一种数据的情况。最经常发生的情况就是表格渲染，当表格有数据的时候，我们去正常的渲染表格数据；当表格没有数据可渲染的时候，我们则输出“暂无数据”。通过v-if和v-else这两个“指令”，能够根据if的条件选择两个组件渲染其中的某一个组件。比如下面的示例中，我们根据hasOrders的值判断是否有订单数据，如果有则显示“订单数据”，否则显示“暂无数据”。
订单数据
暂无数据
//?订单数据
const?orders?=?[]
//?订单数据是否为空
const?hasOrders?=?orders.length?!==?0
示例：通过多条件判断多组件渲染其中一个
Vue还给我们提供了v-else-if这个指令，通过这个指令，我们能够实现根据多个条件渲染满足其中一个条件的那个组件，这一点，类似于Python的elif的用法。
在此之前，我们先理解两个概念，一个是“响应式”，另一个是“双向数据绑定”。
响应式指的是，当一个变量的值修改以后，在Vue的组件中，所有这个变量关联的组件显示的值都会跟着发生改变，这个叫做响应式。比如我们weekDay一开始是“星期三”，那么页面中显示的就是“星期三”；一旦weekDay的值变成了“星期五”，那么页面中显示的值也会立即变成“星期五”。
响应式可以理解为一种单选数据绑定的方式，指的是变量的值修改会影响组件中的值，但是页面中的值修改却不会影响变量的值。双向数据绑定指的是除了变量的修改会影响组件中的值以外，组件中的值发生了变化，变量的值也会跟着发生。
所以在下面的案例中，会有一个有趣现象，weekDay的值，一开始是“星期三”，组件中显示的也是“星期三”，输入框中的值显示的也是“星期三”。但是由于输入框和weekDay的值是双向绑定的，所以我们一旦修改输入框中的值为“星期四”，weekDay的值也会变成“星期四”，接着组件中显示的值也会变成“星期四”。
我们举一个简单示例，比如根据今天是星期几，来判断今天的幸运色。比如：
星期一：红色
星期二：橙色
星期三：黄色
星期四：绿色
星期五：青色
星期六：蓝色
星期天：紫色。
双向数据绑定中的双向指的是从setup到页面的方向和从页面到setup的方向。响应式是单向的，指的是setup中的值发生修改，页面中的值会跟着变化，而页面中的值修改，setup中的值不会发生变化。通过v-model定义的变量是双向的，指的是除了setup的值修改页面会发生变化以外，页面中的值修改，setup中的值也会发生变化。
红色
橙色
黄色
绿色
青色
蓝色
紫色
日期不正确
import?{ref}?from?"vue";
const?weekDay?=?ref("星期三")
- 发表于:
- 原文链接：https://page.om.qq.com/page/OR3BM6QzabUnlhL7JmaU3UHg0
- 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号（企鹅号）传播渠道之一，根据《腾讯内容开放平台服务协议》转载发布内容。
- 如有侵权，请联系 cloudcommunity@tencent.com 删除。
相关快讯
扫码
添加站长 进交流群
领取专属 10元无门槛券
私享最新 技术干货
腾讯云开发者
