vue入门:(条件渲染)
- 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入门:(条件渲染)的更多相关文章
- vue笔记-条件渲染
条件渲染 1:指令v-if单独使用和结合v-else //单独使用 <h1 v-if="ok">Yes</h1> //组合使用 <h1 v-if=&q ...
- vue的条件渲染和列表渲染介绍
一.条件渲染 1.v-if语句 <div v-if="seen">hahahah</div> <!-- v-if插入或者删除元素的指令 --> ...
- 前端框架之Vue(5)-条件渲染
v-if 在字符串模板中,比如 Django Template语法中,我们得像这样写一个条件块: <!-- Handlebars 模板 --> {%if 1%} <h1>Yes ...
- vue基础——条件渲染
一.v-if 1.1.v-if,v-else 在字符串模板中,比如Handlebars,我们得像这样写一个条件块: HTML <!-- Handlebars 模板 --> {{#if ok ...
- Vue v-if条件渲染
1.简单的v-if指令,代码如下 <!DOCTYPE html> <html> <head lang="en"> <meta charse ...
- vue基础---条件渲染
(1)v-if条件渲染 v-if 指令用于条件性地渲染一块内容.这块内容只会在指令的表达式返回 truthy 值的时候被渲染. 可以用 v-else 添加一个“else 块”: ①表达式 <di ...
- VUE:条件渲染和列表渲染
条件渲染 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...
- vue.js条件渲染 v-if else-if v-for
v-if: 在字符串模板中,如 Handlebars ,我们得像这样写一个条件块: {{#if ok}} <!-- Handlebars 模板 --> <h1>Yes</ ...
- Vue.js 条件渲染 v-if、v-show、v-else
v-if v-if 完全根据表达式的值在DOM中生成或移除一个元素.如果v-if表达式赋值为false,那么对应的元素就会从DOM中移除:否则,对应元素的一个克隆将被重新插入DOM中. 1 2 3 ...
- 第六十三篇:Vue的条件渲染与列表渲染
好家伙, 1.条件渲染v-if 1.1.v-if基本使用 <body> <div id="app"> <p v-if="flag" ...
随机推荐
- Python3+RobotFramewok 用户自定义库的开发(四)
在介绍这个之前,可以先看下python的目录Python\Lib\site-packages下面的文件夹,你会发现这个目录下面有DatabaseLibrary.RequestsLibrary.Sele ...
- 安装win10提示“我们无法创建新的分区,也找不到现有分区”
用U盘安装操作系统,但是遇到了这种问题. 出现这种情况可能是硬盘格式通过指令写死了,所以我们需要通过指令把格式清零, 补充: 其实系统找不到系统分区这种情况其实就是引导程序出了问题,可以用大白菜这种w ...
- 一个伪静态与404重定向例子(房产网),.htaccess文件内容
ErrorDocument 404 /404.phpRewriteEngine OnRewriteBase /RewriteRule ^(.*)\.(asp|aspx|asa|asax|dll|jsp ...
- C# VS预生成事件命令行 和 生成后事件命令行
宏 说明 $(ConfigurationName) 当前项目配置的名称(例如,“Debug|Any CPU”). $(OutDir) 输出文件目录的路径,相对于项目目录.这解析为“输出目录”属性的值. ...
- mac被锁有pin码的解锁方法
停用规律: 错误5次密码停用1分钟 再错误3次停用5分钟 在错误1次就停用15分钟 再错误1次就是60分钟了,而且还没输入框了,这时候我们要通过按 option,commond这2个按钮来唤起输入框 ...
- 基于osgQt将OSG嵌入到Qt窗口中(有错误)
1, 编译OSG 由于重装了win10的系统,Qt也安装了最新版5.13,把之前OSG重新编译了一遍,过程与之前的一模一样. Windows7 + OSG3.6 + VS2017 + Qt5.11 2 ...
- Java中传入一个时间范围,取出该时间范围内所有日期的集合
直接上代码: import java.time.LocalDate; import java.time.LocalDateTime; import java.time.LocalTime; impor ...
- Delphi连接sql数据库怎么判断连接是否成功呢
一切属性都设置好后,我在Button里 ADOConnection1.Connected := True;这样连的,之后如何判断是否连接成功了呢?查询一下数据试试?有更直接的办法吗? -------- ...
- centos6.8(虚拟机VNC)输入正确用户名和密码仍跳回登录界面
1)CentOS自动更新到6.8后root无法登陆问题解决 虚拟机CentOS服务器不知道被谁更新系统到6.8后,发现在本机上即使输入正确的密码也无法登陆,发现有一些人也碰见过同样的问题,但是他们是因 ...
- 用curl指令访问api-server
可以直接用curl指令访问api-server,一种是将kubeconfig中所包含的证书抠出来作为参数给curl指令使用.这种方法操作起来比较复杂.还要一种很简单的方法: 首先执行 kubectl ...