山地人

带条件的数据显示

山地人
山地人
2021-05-13

开发应用的时候,我们时常会碰到有些数据的展示是有一定条件的,比如:没有任何数据时,需要提示用户暂无数据。购物余额不足时提示余额不足等等。

下面,我们看看如何在Vue中展示带条件的数据。

-号按钮,将数量改成0 ,看看显示内容发生什么变化?

代码分析

vue给我们提供了一套专门用来处理带条件的数据展示的指令。

指令说明
v-if只有在v-if后面的条件成立,才会显示这条指令所对应的标签的内容
v-else-if和我们在JS中写的if...else if...类似
v-else不满足上述条件时,会显示v-else所在标签的内容

结合你对JS中if-else条件语句的理解,你可以写出下面几种用法

  • 单独使用v-if指令
    <div v-if="store>0">此商品有货</div>
  • 组合使用v-ifv-else指令
    <div v-if="store>0">此商品有货</div>
    <div v-else>暂时缺货</div>
  • 组合使用v-ifv-else-ifv-else指令
    <div v-if="score>90">优秀!</div>
    <div v-else-if="score>80">很棒!</div>
    <div v-else-if="score>=60">合格!</div>
    <div v-else>继续努力!!</div>

原生JavaScript写法

下面我们依然会用脱离框架,用纯JS的方式展示类似的功能,让你可以更为清楚地对比。

在原生写法中条件显示直接在JavaScript的if...else语句中直接处理,然后通过直接对DOM元素的操作来完成。

优缺点分析

  • 对于简单的页面,这种方式处理问题相对来说灵活性更高,但如果页面结构复杂的情况下,代码的可维护程度就需要较高的代码组织和维护能力了。
  • 而对于向使用Vue这种数据和表现分离的,数据驱动型框架,可以让我们更加方便得维护业务代码,而不用太关心底层DOM的操作逻辑。