一、v-if


1.1、v-if,v-else

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

HTML

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

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

    <div v-if="3<2">
      Now you see me
    </div>
    <div v-else>
      Now you don't
    </div>

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

1.2、v-else-if

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

HTML

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

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

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

二、v-show


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

HTML

<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. ThinkPHP5 API 文档

    ThinkPHP5 API 文档 有了这个还是相当的方便,可以快速查找每个组件的方法和接口. https://yangweijie.github.io/thinkphp-lts/index.html# ...

  2. vue-cli 打包报错:Unexpected token: punc (()

    vue-cli 打包报错: ERROR in static/js/vendor.ed7d2353f79d28a69f3d.js from UglifyJs Unexpected token: punc ...

  3. Promise 知识点

    .done() Promise 对象的回调链,不管以then方法或catch方法结尾,要是最后一个方法抛出错误,都有可能无法捕捉到(因为 Promise 内部的错误不会冒泡到全局).因此,我们可以提供 ...

  4. MongoDB GUI( Robo 3T) Shell使用及操作

    Robo 3T 下载及使用 之前叫 Robomongo,后面被收购了,改名 Robo 3T . 下载链接:https://robomongo.org/download (需要FQ) 安装步骤省略,下一 ...

  5. Oracle RAC的机制与测试方法

    Oracle RAC的机制与测试方法 标签: rac 机制 测试 2016-05-25 09:54 1150人阅读 评论(0) 收藏 举报  分类: oracle(2)  1.RAC原理 Oracle ...

  6. 专访TK教主于旸:原来那些搞安全的说的都是真的(图灵访谈)

    引用:http://www.ituring.com.cn/article/196609 于旸,网名“tombkeeper”,在国内黑客界被尊称为“TK教主”,现任腾讯玄武实验室总监.于旸从事信息安全研 ...

  7. 好强大的vim配置文件

    原文链接 http://www.cnblogs.com/ma6174/archive/2011/12/10/2283393.html

  8. bzoj4153 [Ipsc2015]Familiar Couples

    Description 有n对夫妇,一开始夫妇之间互不认识,若两男或两女成为朋友,称他们为"熟人","熟人"关系具有传递性,即若a熟b且b熟c则a熟c.若两组夫 ...

  9. 1084 Broken Keyboard (20 分)

    1084 Broken Keyboard (20 分) On a broken keyboard, some of the keys are worn out. So when you type so ...

  10. Missing Number @leetcode

    Given an array containing n distinct numbers taken from 0, 1, 2, ..., n, find the one that is missin ...