(1)v-if条件渲染

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。

可以用 v-else 添加一个“else 块”:

①表达式

    <div id="area1">
<p v-if="1>2">{{message1}}</p>
<p v-else>{{message2}}</p>
</div>
<script type="text/javascript">
var area1 = new Vue({
el:"#area1",
data:{
message1:"满足条件",
message2:"不满足条件"
}
})
</script>

②属性值

    <div id="area1">
<p v-if="status">{{message1}}</p>
<p v-else>{{message2}}</p>
</div>
<script type="text/javascript">
var area1 = new Vue({
el:"#area1",
data:{
message1:"满足条件",
message2:"不满足条件",
status:false
}
})
</script>

③在 <template> 元素上使用 v-if 条件渲染分组(待验证

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

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

(2)v-else-if

v-else-if 在 2.1.0 新增,顾名思义,用作 v-if 的 else-if 块。可以链式的多次使用:

    <div id="area1">
<p v-if="number<2">{{message1}}</p>
<p v-else-if="number<3">{{message2}}</p>
<p v-else="number<4">{{message3}}</p>
</div>
<script type="text/javascript">
var area1 = new Vue({
el:"#area1",
data:{
message1:"情况1",
message2:"情况2",
message3:"情况3",
number:3
}
})
</script>

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

(3)用 key 管理可复用的元素(待验证

Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外,还有其它一些好处

(4)v-show

v-show也可以根据条件展示元素,与v-if用法大致

    <h1 id="showH1" v-show="status">
v-show显隐控制
</h1>
var showH1 = new Vue({
el:"#showH1",
data:{
status:false
}
})

效果:在页面未展示出来display:none

(6)v-show----VS----v-if

从上面案例可以看出,v-show的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。而v-if则是未经过渲染阶段。

v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。

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

③总结:v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。

因此,1、如果需要非常频繁地切换,则使用 v-show 较好;2、如果在运行时条件很少改变,则使用 v-if 较好。

(7) v-if 和 v-for

不推荐同时使用v-if 和 v-for。当 v-if 与 v-for 一起使用时,v-for 具有比 v-if 更高的优先级。

.

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

  1. vue基础——条件渲染

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

  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. 【面试加分项】java自己定义注解之解析注解

    我之前的博客中说明过自己定义注解的声明今天我们来看看怎样对我们自己定义的注解进行使用. 1.我们在程序中使用我们的注解. 上一篇中我们自己定义了一个注解: @Target(ElementType.FI ...

  2. 跟踪oracle中sql语句运行过程及相关知识拓展

    select * from v$sqlarea; select * from v$sqlarea where first_load_time>'2010-11-27/09:30:00'; 这种方 ...

  3. [项目机会]使用lync的统一通信平台

    [项目内容]基于微软的lync或者其他思科.腾讯等公司技术,建立一个员工统一的通讯平台,可以随时的保持员工之间沟通. [项目价值] 1.保持项目团队成员之间的随时随地高效的电话或者视频会议: 2.集成 ...

  4. GraphDatabase_action

    https://neo4j.com/docs/ #https://pypi.python.org/pypi/neo4j-driver/1.5.3from neo4j.v1 import GraphDa ...

  5. 【OI】Kruskal & ufs (克鲁斯卡与并查集)

    Kruskal是有关于最小生成树的算法. 这个算法非常好理解,用一句话来概括就是: 从小到大找不同集合的边. 那么,具体是怎样的呢. 1.先把所有顶点初始化为一个连通分量. 2.从所有边中选择最小的( ...

  6. 开始学习java编程

    先看视屏,学习JAVA语法先,后面再看java web mvc,以及myeclipse http://i.youku.com/u/UMzM4MjMxNjMy/videos 争取20天内进步很大.

  7. Java 泛型 五:泛型与数组

    简介 上一篇文章介绍了泛型的基本用法以及类型擦除的问题,现在来看看泛型和数组的关系.数组相比于Java 类库中的容器类是比较特殊的,主要体现在三个方面: 数组创建后大小便固定,但效率更高 数组能追踪它 ...

  8. libnids TCP数据流重组,显示TCP连接过程的程序总无法捕获数据包解决办法:

      法一: 指定可用网卡: nids_params.device="lo"; 法二: nids.h中有这么一段: struct nids_chksum_ctl { u_int ne ...

  9. MySql数据库创建表

    3.3.MySql数据库创建表 创建5个表: UserInfo用户基础表 Role 角色表 MenuInfo 菜单即控制表 Relation_Role_Menu 角色对应菜单关系表 RelaTion_ ...

  10. post和get区别,其他答案真的太坑

    原理: get和post都是http定义与服务器交互的方法,还有put,delete url是网络上的资源,那么http中的get,post,put,delete对应的就是对这个资源的查,改,增,删四 ...