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

一、v-if:生成或者移出一个元素

 <div id="example">
<button v-on:click="ifEvent">点击</button>
<p v-if="greeting">hello</p>
</div>
<script>
var vm = new Vue({
el:'#example',
data:{
greeting:true
},
methods:{
ifEvent(){
this.greeting = !this.greeting;
}
}
});
</script>

v-if表达式采用boolean值切换元素生成与删除,由于节点生成和删除会有较高的性能消耗,如果需要一次生成和删除多个元素时,可以采用<template>元素作为包装元素,在包装元素上使用v-if指令,最终的渲染结果不会包含包装元素,看示例:

 <div id="example">
<button v-on:click="ifEvent">点击</button>
<div>
<template v-if="greeting">
<h2>我是标题</h2>
<p>我是简介</p>
<p>我是内容</p>
</template>
</div>
</div>
<script>
var vm = new Vue({
el:'#example',
data:{
greeting:true
},
methods:{
ifEvent(){
this.greeting = !this.greeting;
}
}
});
</script>

渲染结果:

由于v-if采用的是生成和删除节点,除非在一些购物车等特定应用场景下需要生成和删除节点,多数情况下的需求是只需要做显示和隐藏,所以这时候就没有必要删除节点,仅仅只需要对节点操作display样式实现即可,所以接下来介绍v-show指令。

二、v-show:展示或隐藏一个元素

 <div id="example">
<button v-on:click="ifEvent">点击</button>
<div v-show="greeting">hello</div>
</div>
<script>
var vm = new Vue({
el:'#example',
data:{
greeting:true
},
methods:{
ifEvent(){
this.greeting = !this.greeting;
}
}
});
</script>

通过v-show来实现展示和隐藏,实际上就是操作元素的display的样式属性,比如示例中的div在被隐藏是的元素结构是:

然需要注意的是v-show不支持<template>语法。

vi-if是惰性的,如果在初始渲染时条件为假则什么都不做,只有在条件为真时才会编局部编译渲染,并且编译会被缓存起来。

既然有v-if的存在,v-else怎么能少呢?

三、v-else

v-else指令的语法含义跟javascript中的else一致,必须跟v-if配合使用,但不能与show一起使用。

 <div id="example">
<button v-on:click="ifEvent">点击</button>
<div v-if="greeting">我是会员</div>
<div v-else="greeting">我是超级会员</div>
</div>
<script>
var vm = new Vue({
el:'#example',
data:{
greeting:true
},
methods:{
ifEvent(){
this.greeting = !this.greeting;
}
}
});
</script>

如果是v-show也需要实现切换的话可以采用非值来实现,比如上面的v-else可以使用下面这样的方式来实现:

<div v-show="!greeting">我是超级会员</div>

vue入门:(条件渲染)的更多相关文章

  1. vue笔记-条件渲染

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

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

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

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

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

  4. vue基础——条件渲染

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

  5. Vue v-if条件渲染

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

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. GC垃圾回收 | 深入理解G1垃圾收集器和GC日志

    来源:并发编程网链接:http://ifeve.com/深入理解G1垃圾收集器/ G1 GC是Jdk7的新特性之一.Jdk7+版本都可以自主配置G1作为JVM GC选项:作为JVM GC算法的一次重大 ...

  2. 怎么让C#项目自动复制NuGet中的dll引用到输出目录?

    1.从vs中关闭项目 2.用记事本打开csproj文件 3.  在<PropertyGroup> 和 </PropertyGroup>之间添加一行: <CopyLocal ...

  3. linux内核中的subsys_initcall是干什么的?

    注意:使用的内核源码版本为5.1.3 1. subsys_initcall长什么样子? 它其实是个宏定义,定义如下: #define subsys_initcall(fn)     __define_ ...

  4. OpenCV、OpenCL、OpenGL、OpenMP的区别

    OpenCV        OpenCV的全称是:Open Source Computer Vision Library.OpenCV是一个开源发行的跨平台计算机视觉库,可以运行在Linux.Wind ...

  5. 代理模式之Cglib代理

    Cglib代理,也叫做子类代理.在内存中构建一个子类对象从而实现对目标对象功能的扩展. l  JDK的动态代理有一个限制,就是使用动态代理的对象必须实现一个或多个接口.如果想代理没有实现接口的类,就可 ...

  6. application节点

    <application>节点是AndroidManifest.xml文件中必须持有的一个节点,它包含在<manifest>节点下.通过<application>节 ...

  7. jmeter之吞吐量控制器

    比如说有一种场景是,10个并发里,有2个事操作业务A,有8个是操作业务B,要模拟这种业务场景,则可以通过吞吐量控制器来模拟 目录 1.用法 2.举例 1.用法 第一种:设置比例控制 选择percent ...

  8. ssm整合用到的依赖jar包(不充足)

    <!--spring 的核心的jar包--><dependency> <groupId>org.springframework</groupId> &l ...

  9. .Netcore 2.0 Ocelot Api网关教程(5)- 认证和授权

    本文介绍Ocelot中的认证和授权(通过IdentityServer4),本文只使用最简单的IdentityServer,不会对IdentityServer4进行过多讲解. 1.Identity Se ...

  10. 线程结束,GetExitCodeThread后结束值一直STILL_ACTIVE,259的问题

    最近在用VC++编写一个视觉检测系统,其中开的线程比较多.知道线程什么时候结束是很重要的一个问题.其中用到了GetExitCodeThread()函数.函数原型如下: BOOL GetExitCode ...