一、v-if


1.1、v-if,v-else

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

HTML

  1. <!-- Handlebars 模板 -->
  2. {{#if ok}}
  3. <h1>Yes</h1>
  4. {{/if}}

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

  1. <div v-if="3<2">
  2. Now you see me
  3. </div>
  4. <div v-else>
  5. Now you don't
  6. </div>

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

1.2、v-else-if

是在2.1.0新增,顾名思义,充当v-if的"else-if块",可以连续使用:

HTML

  1. <div v-if="type === 'A'">
  2. A
  3. </div>
  4. <div v-else-if="type === 'B'">
  5. B
  6. </div>
  7. <div v-else-if="type === 'C'">
  8. C
  9. </div>
  10. <div v-else>
  11. Not A/B/C
  12. </div>

类似于v-elsev-else-if也必须紧跟在v-if或者v-else-if之后

1.3、用key管理可重复的元素

二、v-show


另一个根据条件展示元素的选项是v-show指令。用法大致一样。

HTML

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

不同的是带有v-show的元素始终会被渲染并保留在dom中。v-show指令只是简单切换元素的css属性display

注意v-show不支持<template>元素,也不支持v-else

三、v-if vs v-show


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

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

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

一般来说,v-if有更高的切换开销,而v-show有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用v-show更好;如果运行时条件很少改变,则使用v-if较好。

四、v-if与v-for一起使用


v-ifv-for一起使用时,v-for具有比v-if更高的优先级

vue基础——条件渲染的更多相关文章

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

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

  2. vue笔记-条件渲染

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

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

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

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

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

  5. Vue v-if条件渲染

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

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

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

  7. vue.js条件渲染 v-if else-if v-for

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

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

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

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

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

随机推荐

  1. 洛谷 3706 [SDOI2017]硬币游戏——思路

    题目:https://www.luogu.org/problemnew/show/P3706 题解:https://blog.csdn.net/gjghfd/article/details/80355 ...

  2. 如何使用Django 启动命令行及执行脚本

    使用django启动命令行和脚本,可以方便的使用django框架做开发,例如,数据库的操作等. 下面分别介绍使用方法. django shell的启动 启动命令: $/data/python-virt ...

  3. 【python】实例-判断用户输入数字的类型

    num=input("please input the num: ") print "the number your input is: "+str(num) ...

  4. GNU C与ANSI C的不同

    引用:http://tsroad.lofter.com/post/376316_57ac519 1.GNU C可定义0长度数组,目的是为了定义可变长结构体. struct var_struct{    ...

  5. iis运行asp.net页面提示“服务器应用程序不可用”的解决办法_.NET.

    原因:主要是iis安装在了net framwork之后 解决办法:需要在IIS中重新注册.net 也就是要用到系统盘: cd c:\windows\microsoft.net\framework\v2 ...

  6. JQuery 实现 Tab 切换 index

    $(function(){ var h_new=$('.new h4 a'); var new_dl=$('.new dl'); new_dl.first().show(); h_new.mousee ...

  7. 转 WCF中同步和异步通讯总结

    我这样分个类: WCF中, 以同步.异步角度考虑通讯的方式分为四种:跨进程同步.跨进程异步.发送队列端同步.发送队列端异步.之所以造成这样的结果源于两个因素,一个是传统概念上的同异步,一个是对于WCF ...

  8. msql主从复制

    Mysql数据库主从复制原理: 主库开启bin-log日志,同时生成IO线程.IO线程负责将用户写入数据库的sql语句记录在二进制日志bin-log,该记录过程可并发进行:生成标识号 server i ...

  9. php 加密 解密 方法

    base64        Base64编码可用于在HTTP环境下传递较长的标识信息      base64_encode       base64_decodeserialize       可以将 ...

  10. 学习笔记之XML

    什么是QName - Benjieming_Wang的专栏 - CSDN博客 http://blog.csdn.net/Benjieming_Wang/article/details/5959961 ...