• 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. Python3+RobotFramewok 用户自定义库的开发(四)

    在介绍这个之前,可以先看下python的目录Python\Lib\site-packages下面的文件夹,你会发现这个目录下面有DatabaseLibrary.RequestsLibrary.Sele ...

  2. 安装win10提示“我们无法创建新的分区,也找不到现有分区”

    用U盘安装操作系统,但是遇到了这种问题. 出现这种情况可能是硬盘格式通过指令写死了,所以我们需要通过指令把格式清零, 补充: 其实系统找不到系统分区这种情况其实就是引导程序出了问题,可以用大白菜这种w ...

  3. 一个伪静态与404重定向例子(房产网),.htaccess文件内容

    ErrorDocument 404 /404.phpRewriteEngine OnRewriteBase /RewriteRule ^(.*)\.(asp|aspx|asa|asax|dll|jsp ...

  4. C# VS预生成事件命令行 和 生成后事件命令行

    宏 说明 $(ConfigurationName) 当前项目配置的名称(例如,“Debug|Any CPU”). $(OutDir) 输出文件目录的路径,相对于项目目录.这解析为“输出目录”属性的值. ...

  5. mac被锁有pin码的解锁方法

    停用规律: 错误5次密码停用1分钟 再错误3次停用5分钟 在错误1次就停用15分钟 再错误1次就是60分钟了,而且还没输入框了,这时候我们要通过按 option,commond这2个按钮来唤起输入框 ...

  6. 基于osgQt将OSG嵌入到Qt窗口中(有错误)

    1, 编译OSG 由于重装了win10的系统,Qt也安装了最新版5.13,把之前OSG重新编译了一遍,过程与之前的一模一样. Windows7 + OSG3.6 + VS2017 + Qt5.11 2 ...

  7. Java中传入一个时间范围,取出该时间范围内所有日期的集合

    直接上代码: import java.time.LocalDate; import java.time.LocalDateTime; import java.time.LocalTime; impor ...

  8. Delphi连接sql数据库怎么判断连接是否成功呢

    一切属性都设置好后,我在Button里 ADOConnection1.Connected := True;这样连的,之后如何判断是否连接成功了呢?查询一下数据试试?有更直接的办法吗? -------- ...

  9. centos6.8(虚拟机VNC)输入正确用户名和密码仍跳回登录界面

    1)CentOS自动更新到6.8后root无法登陆问题解决 虚拟机CentOS服务器不知道被谁更新系统到6.8后,发现在本机上即使输入正确的密码也无法登陆,发现有一些人也碰见过同样的问题,但是他们是因 ...

  10. 用curl指令访问api-server

    可以直接用curl指令访问api-server,一种是将kubeconfig中所包含的证书抠出来作为参数给curl指令使用.这种方法操作起来比较复杂.还要一种很简单的方法: 首先执行 kubectl ...