Vue.js 学习(6) -- Vue指令之：条件渲染

系统管理员 2022-06-15 03:40 210阅读 0赞

本节的重点是几个Vue指令：

v-if
    v-else
    v-else-if
    v-show

它们共同的特点，就是都会根据条件，对DOM元素进行渲染。

## v-if ##

<h1 v-if="ok">Yes</h1>

h1会被渲染当且仅当ok = true。

## v-else ##

可以为v-if后添加一个v-else：

<h1 v-if="ok">Yes</h1>
    <h1 v-else>No</h1>

这样，如果ok为true，则渲染第一个h1, 否则，渲染第二个h1。

注意，v-else 元素必须紧跟在 v-if 元素或者 v-else-if的后面——否则它不能被识别。

## v-else-if ##

v-if…v-else-if…v-else-if…v-else的逻辑和if…else if…else if…else的逻辑很像：

<div v-if="type === 'A'">
      A
    </div>
    <div v-else-if="type === 'B'">
      B
    </div>
    <div v-else-if="type === 'C'">
      C
    </div>
    <div v-else>
      Not A/B/C
    </div>

这样根据type的值，vue就可以分情况对dom进行渲染。

## v-show ##

<h1 v-show="ok">Hello!</h1>

当OK为true的时候，h1会被显示出来。  
于v-if不同的是，有 v-show 的元素会始终渲染并保持在 DOM 中。v-show 是简单的切换元素的 CSS 属性 display 。

另外，注意：注意 v-show 不支持 < template > 语法。

**对比：**  
**v-if & v-show**

v-if 是真实的条件渲染，因为它会确保条件块在切换当中适当地销毁与重建条件块内的事件监听器和子组件。
    v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。
    相比之下， v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。
    一般来说， v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换使用 v-show 较好，如果在运行时条件不大可能改变则使用 v-if 较好。

**v-if & v-for**  
当与v-for一起使用时，v-for具有比v-if更高的优先级。

发表评论取消回复

表情：

评论列表（有 0 条评论，210人围观）

还没有评论，来说两句吧...

相关阅读

相关 React学习之条件渲染

说明：本系列所有demo代码的github地址为：[https://github.com/Brucewu998/react.js-learning][https_github

た入场券/ 2022年12月02日 15:27/ 0 赞/ 203 阅读

相关 Vue.js 学习(6) -- Vue指令之：列表渲染

本节的重点内容是v-for指令。 v-for指令将根据指令后的数据，循环的对DOM元素进行渲染。基础基础栗子： <ul id="example-1">

ゝ一纸荒年。/ 2022年06月15日 03:43/ 0 赞/ 237 阅读

相关 Vue.js 学习(6) -- Vue指令之：条件渲染

本节的重点是几个Vue指令： v-if v-else v-else-if v-show 它们共同的特点，就是都会根据条件，对DOM元素进行渲

系统管理员/ 2022年06月15日 03:40/ 0 赞/ 211 阅读

相关 Vue之条件渲染

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>条件渲染</title> <

小灰灰/ 2022年05月23日 13:07/ 0 赞/ 262 阅读

相关 Vue 条件渲染指令

和JavaScript的条件语句一样，vue的条件指令可以根据表达式的值在dom中渲染或者销毁元素/组件,常用的条件指令有： v-if v-else-if

爱被打了一巴掌/ 2022年05月19日 02:00/ 0 赞/ 293 阅读

相关 Vue条件渲染

Vue条件渲染 v-if v-else v-else-if 用 key 管理可复用的元素 v-show v-if vs v-show

谁践踏了优雅/ 2021年10月20日 00:26/ 0 赞/ 491 阅读

相关【Vue 学习】- VueJS 常用系统指令

目录 1 v-on 指令 1.1 v-on:click 1.2 v-on:keydown 1.3 v-on:mouseover 1.4 事件修饰符 1.5 按键修饰

太过爱你忘了你带给我的痛/ 2021年09月21日 00:56/ 0 赞/ 629 阅读

相关 Vue条件渲染

本博客记录了小编在学习Vue过程中的体会与感悟，简单来说就是小编的学习笔记，学习地址主要为Vue的官网，官网地址为：[《Vue官方文档》][Vue]。相关学习笔

约定不等于承诺〃/ 2021年09月20日 02:54/ 0 赞/ 433 阅读

相关 6、vue.js if判断条件渲染

HTML 部分代码 <div id="div_id">  <div v-if="id == 1">ID等于1<

男娘i/ 2021年08月28日 18:19/ 0 赞/ 413 阅读

相关 Vue - 条件渲染

Vue 中条件渲染一. v-if 和 v-show 二. v-if 和 v-else 三. v-if、v-else-if 和 v-else 四.

清疚/ 2021年07月25日 17:13/ 0 赞/ 506 阅读