v-if:

在字符串模板中,如 Handlebars ,我们得像这样写一个条件块:

{{#if ok}}     <!-- Handlebars 模板 -->
<h1>Yes</h1>
{{/if}}

在 Vue.js ,我们使用 v-if 指令实现同样的功能:

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

因为 v-if 是一个指令,需要将它添加到一个元素上。但是如果我们想切换多个元素呢?此时我们可以把一个 元素当做包装元素,并在上面使用 v-if。最终的渲染结果不会包含 template元素  

<template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>

v-else:你可以使用 v-else 指令来表示 v-if 的“else 块”,但是必须紧跟在v-if或者v-else-if后面搭配一起使用 

<div v-if="i<7">smile</div>
<div v-else>cry</div>
data:{
i:5
}

v-else-if,顾名思义,充当 v-if 的“else-if 块”。可以链式地使用多次: 

<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>

  

用key管理可复用的元素

Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染。这么做,除了使 Vue 变得非常快之外,还有一些有用的好处。例如,如果你允许用户在不同的登录方式之间切换:

<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address">
</template>

在上面的代码中切换loginType将不会清除用户已经清除的内容,因为两个模板使用了相同的元素,<input>不会被替换掉--仅仅是替换了他的placeholder 

Vue为你提供了一种方式来声明“这两个元素是完全独立的——不要复用他们”。只需添加一个具有唯一值的key属性即可: 

<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address" key="email-input">
</template>

现在每次切换时,输入框都将重新被渲染,这样元素还是会被高效利用,因为他们没添加key属性

v-show:也是根据条件展示元素,用法大致一样

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

不同的是带有v-show的元素始终会被渲染并保留在DOM中,也就是简单的切换元素CSS的display属性(v-show不支持v-else语法)

v-if是“真正的”条件渲染,因为他会确保在切换过程中条件块内的事件监听器和子组件适当的被销毁和重建

v-if也是惰性的:如果在初始渲染是条件为假,就什么也不做——直到条件第一次变为真时,才会开始渲染条件块

相比之下,v-show就简单的多——不管初始条件是什么,元素总是会被渲染,并且只是简单的基于CSS进行切换

一般来说,v-if有更高的切换开销,v-show有更高的初始化渲染开销,所以,需要频繁的切换使用v-show,如果项目运行时条件切换少,就用v-if

v-if和v-for一起使用,v-for的优先级要高于v-if

  

vue.js条件渲染 v-if else-if v-for的更多相关文章

  1. Vue.js 条件渲染 v-if、v-show、v-else

    v-if  v-if 完全根据表达式的值在DOM中生成或移除一个元素.如果v-if表达式赋值为false,那么对应的元素就会从DOM中移除:否则,对应元素的一个克隆将被重新插入DOM中. 1 2 3 ...

  2. Vue v-if条件渲染

    1.简单的v-if指令,代码如下 <!DOCTYPE html> <html> <head lang="en"> <meta charse ...

  3. VUE:条件渲染和列表渲染

    条件渲染 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

  4. 第六十三篇:Vue的条件渲染与列表渲染

    好家伙, 1.条件渲染v-if 1.1.v-if基本使用 <body> <div id="app"> <p v-if="flag" ...

  5. vue笔记-条件渲染

    条件渲染 1:指令v-if单独使用和结合v-else //单独使用 <h1 v-if="ok">Yes</h1> //组合使用 <h1 v-if=&q ...

  6. vue的条件渲染和列表渲染介绍

    一.条件渲染 1.v-if语句 <div v-if="seen">hahahah</div> <!-- v-if插入或者删除元素的指令 --> ...

  7. 前端框架之Vue(5)-条件渲染

    v-if 在字符串模板中,比如 Django Template语法中,我们得像这样写一个条件块: <!-- Handlebars 模板 --> {%if 1%} <h1>Yes ...

  8. vue基础——条件渲染

    一.v-if 1.1.v-if,v-else 在字符串模板中,比如Handlebars,我们得像这样写一个条件块: HTML <!-- Handlebars 模板 --> {{#if ok ...

  9. vue基础---条件渲染

    (1)v-if条件渲染 v-if 指令用于条件性地渲染一块内容.这块内容只会在指令的表达式返回 truthy 值的时候被渲染. 可以用 v-else 添加一个“else 块”: ①表达式 <di ...

随机推荐

  1. GCC 环境变量 & eclipse CDT 头文件配置

     转:http://blog.csdn.net/statdm/article/details/7751000 GCC 环境变量 & eclipse CDT 头文件配置   在unix 下使用e ...

  2. JS图片宽度自适应移动端

    $(function(){ $("#d-intro").find("img").each(function () {                $(this ...

  3. PHPFPM模式三种运行模式

    1.static模式 static模式始终会保持一个固定数量的子进程,这个数量由pm.max_children定义.   2.dynamic模式 子进程的数量是动态变化的,启动时,会生成固定数量的子进 ...

  4. ESXi导出的CentOS7 ovf文件导入到workstation 无法打开GUI登录界面的问题解决方案

    1. 前几天将centos的机器导出为ovf 文件 然后使用 workstation 引入之后发现总是黑屏 然后有一个 横杠在闪 2. 解决办法是 修改centos的虚拟机配置文件,将显示器修改为这样 ...

  5. openstack镜像服务(glance)

    1.Use the database access client to connect to the database server as the root user: $ mysql -u root ...

  6. Codeforces 1262F Wrong Answer on test 233(组合数)

    E1:设dp[i][j],表示在第i个位置的当前新状态超过原状态j分的方案数是dp[i][j],那么对于这种情况直接进行转移即可,如果a[i]==b[i]显然k种选择都可以,不影响j,如果不一样,这个 ...

  7. Ubuntu 解决wifi无法打开的问题 安装NVIDIA显卡驱动的正确姿势

    游戏本型号Y7000 win10 Ubuntu16.04双系统 解决wifi无法打开的问题 解决方法: 1.打开终端输入:rfkill list all 出现如下提示::       可以看到,优先级 ...

  8. 获取IP地址的几种方法

    根据ip获取地址的几种方法 1.调用新浪IP地址库 <script type="text/javascript" src="js/jquery.js"&g ...

  9. TMS320F28335——SPI使用笔记

    一.SPI硬件接口 GPIO54    -------    SPISIMOA GPIO55    -------    SPISOMIA GPIO56    -------    SPCLK GPI ...

  10. 使用英特尔® 驱动程序和支持助理更新英特尔®固态盘数据中心工具(英特尔®固态盘 DCT)后仍旧提示更新

    再regedit中搜索原始版本,位于计算机\HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Uninstall\{82F015 ...