Vue.js 教程

Vue.js 条件渲染(v-if)

Vue.js 中的条件渲染指通过 Vue 提供的条件指令(v-if、v-else-if、v-else)通过逻辑条件判断动态渲染页面。

条件指令

v-if 指令

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true 的时候被渲染。示例如下:

<div id="app">
   <p v-if="score >= 60">你及格了,继续努力……</p>
</div>

<script type="text/javascript">
   var app = new Vue({
       el: "#app",
       data: {
           score: 78
       }
   });
</script>

渲染结果:

<div id="app">
    <p>你及格了,继续努力……</p>
</div>

v-else-if 指令

2.1.0 版本新增,充当 v-if 的 “else-if 块”,可以连续使用。示例如下:

<div id="app">
   <p v-if="score >= 60 && score &lt; 70">你及格了,继续努力……</p>
   <p v-else-if="score >= 70 && score &lt; 80">不错哦,我看好你</p>
   <p v-else-if="score >= 90">你很优秀,你是我的骄傲</p>
   <p v-else>很抱歉,未及格!</p>
</div>

<script type="text/javascript">
   var app = new Vue({
       el: "#app",
       data: {
           score: 78
       }
   });
</script>

渲染结果:

<div id="app">
   <p>不错哦,我看好你</p>
</div>

v-else 指令

你可以使用 v-else 指令来表示 v-if 的 “else 块”。

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

示例如下:

<div id="app">
   <p v-if="score >= 60">你及格了,继续努力……</p>
   <p v-else>很抱歉,未及格!</p>
</div>

<script type="text/javascript">
   var app = new Vue({
       el: "#app",
       data: {
           score: 78
       }
   });
</script>

渲染结果:

<div id="app">
   <p>你及格了,继续努力……</p>
</div>

<template> 与 v-if

因为 v-if 是一个指令,所以必须将它添加到一个元素上。但是如果想切换多个元素呢?此时可以把一个 <template> 元素当做不可见的包裹元素,并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素。示例如下:

<div id="app">
   <template v-if="score >= 60">
       <p>恭喜您,及格了</p>
       <p>成绩:{{ score }}</p>
   </template>
</div>

<script type="text/javascript">
   var app = new Vue({
       el: "#app",
       data: {
           score: 78
       }
   });
</script>

渲染结果:

<div id="app">
   <p>恭喜您,及格了</p>
   <p>成绩:78</p>
</div>
说说我的看法
全部评论(
没有评论
关于
本网站属于个人的非赢利性网站,转载的文章遵循原作者的版权声明,如果原文没有版权声明,请来信告知:hxstrive@outlook.com
公众号