条件渲染

条件渲染免费看

11-10侠课岛    新上线 基础入门       

前端/前端/Vue入门教程 10     0     227

v-if 指令的使用

Vue 中,v-if 指令可以用于条件性地渲染一块内容,这块内容只会在指令的表达式返回 truthy 值的时候被渲染。

示例:

例如下面这段代码中,有姓名和年龄这两条信息,现要求只显示姓名,而隐藏年龄:

<div id="app">
    <p v-if="show">显示姓名:小飞侠</p>
    <p v-if="hide">隐藏年龄:28</p>
</div>
const app = Vue.createApp({
  data() {
    return {
      show:true,
      hide:false
    }
  }
}).mount('#app')

在浏览器中看一下效果:

我们可以看到在浏览器中关于年龄的信息被成功隐藏,这是因为我们分别在两条信息上使用 v-if 指令绑定了两个属性,属性 show 的值为 true,属性 hide 的值为 false 。内容只有当 v-if 指令的表达式返回真值的时候才会被渲染,所以第二条信息被成功隐藏。

v-else指令

v-if 指令就类似 JavaScript 中的 if 语句,而 if 语句有与之匹配的 else 语句,v-if 指令也有与之匹配的 v-else 指令。

示例:

例如下面这段代码中:

<div id="app">
    <p v-if="3>1">显示</p>
    <p v-else>隐藏</p>
</div>

v-if 指令的表达式值为真,所以内容会被渲染,而与之对应的 v-else 指令中的内容则不会被渲染。反之如果v-if指令表达式值为假,则会渲染 v-else 指令中的内容。

注意: v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面,否则它将不会被识别。

v-else-if指令

v-else-if 指令是在 2.1.0 新增的一个指令,相当于 JavaScript 中的 else-if 语句,可以同时使用多个 v-else-if 指令。

示例:
<div id="app">
    <p v-if="name=='Mark'">我是Mark</p>
    <p v-else-if="name=='Tom'">我是Tom</p>
    <p v-else-if="name=='xkd'">我是xkd</p>
    <p v-else>猜猜我是谁?</p>
</div>

类似于 v-elsev-else-if 指令必须紧跟在 v-if 指令之后,v-else 指令之前。

v-show指令

还有一个指令也可以根据条件展示元素的选项,也就是 v-show 指令。

示例:
<h1 v-show="show">侠课岛欢迎你!</h1>

带有 v-show 指令的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display

v-if和v-show对比

v-if 指令和 v-show 指令都是通过条件来渲染元素内容,但是它们还是有区别的。

  • v-if 是惰性的,如果 v-if 的表达式结果不是true的话,对应的元素是不会被渲染出来的,一直到表达式的结果第一次为 true 的时候,才会去渲染。
  • v-show 不管表达式的结果如何,都会渲染出来,表达式的结果只是用来判断是否通过css来切换元素的隐藏和显示。
  • 一般来说v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因为如果在运行时条件不太可能改变则使用 v-if 较好。如果需要非常频繁地切换,则使用 v-show 较好。

提示:v-ifv-for 一起使用时,v-if 具有比 v-for 更高的优先级。但是不推荐同时使用 v-ifv-for

本教程图文或视频等内容版权归侠课岛所有,任何机构、媒体、网站或个人未经本网协议授权不得转载、转贴或以其他方式复制发布或发表。

评价

10

本课评分:
  •     非常好
难易程度:
  •     适中的
|
教程
粉丝
主页

签到有礼

已签到2天,连续签到7天即可领取7天全站VIP

  • 1
    +2 金币
  • 2
    +3 金币
  • 3
    +5 金币
  • 6
    +7 金币
  • 5
    +6 金币
  • 4
    暖心福利
    自选分类VIP ×1天
  • 7
    惊喜大礼

    自选分类VIP ×3天 +20金币
  • 持续签到 +8 金币

金币可以用来做什么?