Vue v-if条件渲染
1、简单的v-if指令，代码如下
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="id">
<span v-if="flag">
如果flag为true则显示,false不显示!
</span>
</div>
</body>
<script>
var vm = new Vue({
el:"#id",
data:{
flag:true
}
})
</script>
</html>
在控制台可以改变flag的值。
2、v-else
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
<div v-if="Math.random() > 0.5">
Now you see me
</div>
<div v-else>
Now you don't
</div> <div v-if="num==10">
num = {{num}}
</div>
<div v-else>
num != 10
</div>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data:{
num:10
}
})
</script>
</html>
3、v-else-if
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
{{message}}
<div v-if="message==='A'">
str = {{message}}
</div>
<div v-else-if="message==='B'">
str = {{message}}
</div>
<div v-else-if="message==='C'">
str = {{message}}
</div>
<div v-else>
str = null
</div>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data:{
message: 'B'
}
})
</script>
</html>
输出结果:
4、用key管理可复用元素
先看看不用key管理可复用元素的代码。Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做，除了使 Vue 变得非常快之外，还有一些有用的好处，那就是在切换input时不会清楚里面的数据。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
<span v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username" >
</span>
<span v-else>
<label>Email</label>
<input placeholder="Enter your email address" >
</span>
<button v-on:click="test">切换</button>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data:{
loginType: 'username'
},
methods:{
test:function(){
if(this.loginType != 'username'){
return this.loginType = 'username'
}
return this.loginType = 'email'
}
}
})
</script>
</html>
我么再看看使用key管理可复用元素。添加key属性，则这两个元素是相互独立，不再复用。这样当我们在切换input时里面的数据会被清除。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
<span v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username" key="username-input">
</span>
<span v-else>
<label>Email</label>
<input placeholder="Enter your email address" key="email-input">
</span>
<button v-on:click="test">切换</button>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data:{
loginType: 'username'
},
methods:{
test:function(){
if(this.loginType != 'username'){
return this.loginType = 'username'
}
return this.loginType = 'email'
}
}
})
</script>
</html>
5、v-show & v-if
v-show也是根据条件展示元素的指令。带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 是简单地切换元素的 CSS 属性 display 。
v-show 不支持 <template> 语法，也不支持 v-else。
两者之间的区别：
v-if :1.是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
2.是惰性的，只有当条件为true时才会渲染，如果条件为false则什么都不做
3.有很高的切换开销，适用于条件不太容易改变的时候
v-show:1.不管条件是true还是false都会进行渲染。并且只是简单地基于 CSS 进行切换
2.有很高的初始渲染开销，适用于非常频繁地切换
v-show的代码示例如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
<div v-show="flag">
you can see me
</div> </div>
</body>
<script>
var vm = new Vue({
el:"#app",
data:{
flag: true
}
})
</script>
</html>
6、v-if 和v-for 混合使用示例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
<div v-for="message in messageList" v-if="message.test == 'vue.js'">
{{message.test}}
</div>
<br>------------完美的分隔线--------------</br>
<div v-for="message in messageList">
<span v-if="message.test == 'vue.js'">{{message.test}}是一种很好用的前台框架</span>
{{message.test}}
</div>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data:{
messageList: [
{test:'java'},
{test:'vue.js'},
{test:'liunx'}
]
}
})
</script>
</html>
输出结果：
Vue v-if条件渲染的更多相关文章
- 关于vue.js中条件渲染的练习
html: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8 ...
- Vue 样式绑定 && 条件渲染
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...
- Vue 基础自查——条件渲染和列表渲染
v-if和v-show的区别是什么? v-if和v-for为什么不能一起用? v-for中的key有什么作用? 1 v-if 和 v-show 1.1 作用 都用来控制元素的显示和隐藏 1.2 控制元 ...
- 3-6 Vue中的条件渲染
本次案例讲解:v-if,v-show,v-else,v-else-if和key值的相关用法!!! v-if指令: //通过一个(v-if)指令 ,可以结合js表达式的返回值,决定一个标签是否在页面上展 ...
- Vue指令之条件渲染
1. v-show 根据表达式的真假值,切换元素的 display CSS属性.表达式为false时,p标签被赋予 style="display:none;" <p v-sh ...
- 【Vue】Vue框架常用知识点 Vue的模板语法、计算属性与侦听器、条件渲染、列表渲染、Class与Style绑定介绍与基本的用法
Vue框架常用知识点 文章目录 Vue框架常用知识点 知识点解释 第一个vue应用 模板语法 计算属性与侦听器 条件渲染.列表渲染.Class与Style绑定 知识点解释 vue框架知识体系 [1]基 ...
- 前端vue之属性指令、style和class、条件渲染、列表渲染、事件处理、数据双向绑定、表单控制、v-model进阶
今日内容概要 属性指令 style和class 条件渲染 列表渲染 事件处理 数据的双向绑定 v-model进阶 购物车案例 内容详细 1.属性指令 <!DOCTYPE html> < ...
- 第六十三篇：Vue的条件渲染与列表渲染
好家伙, 1.条件渲染v-if 1.1.v-if基本使用 <body> <div id="app"> <p v-if="flag" ...
- Vue#条件渲染
根据不同的条件,响应不同的事件. https://jsfiddle.net/miloer/zed5p1r3/ 可以用template来包装元素,当然浏览器的最终渲染结果不会包含它.我觉得主要用它来自定 ...
- 03-Vue入门系列之Vue列表渲染及条件渲染实战
3.1. 条件渲染 有时候我们要根据数据的情况,决定标签是否进行显示或者有其他动作.最常见的就是,表格渲染的时候,如果表格没有数据,就显示无数据.如果有数据就显示表格数据. Vue帮我们提供了一个v- ...
随机推荐
- MVC路由自定义及视图找寻规则
这篇关于MVC路由及视图规则本来是昨天要发的,但是本人真的有点懒,终于今天忍无可忍了.初学MVC的时候比现在还菜一点(现在也很菜),想着会用就行,但是有时还是会好奇,为什么它能找到控制器?为什么控制器 ...
- 《从零开始学Swift》学习笔记（Day 18）——有几个分支语句？
原创文章,欢迎转载.转载请注明:关东升的博客 分支语句又称条件语句,Swift编程语言提供了if.switch和guard三种分支语句. if语句 由if语句引导的选择结构有if结构.if ...
- 1686 第K大区间(尺取+二分)
1686 第K大区间 基准时间限制:1 秒 空间限制:131072 KB 分值: 40 难度:4级算法题 定义一个区间的值为其众数出现的次数.现给出n个数,求将所有区间的值排序后,第K大的值为多少. ...
- Python之可迭代对象、迭代器、生成器
在使用Python的过程中,很容易混淆如下几个关联的概念: 1.容器(container) 2.可迭代对象(Iterable) 3.迭代器(Iterator) 4.生成器(generator) 5.生 ...
- jetty 通过配置文件嵌入式启动web服务
定义 jetty.xml 启动文件 <?xml version="1.0"?><!DOCTYPE Configure PUBLIC "-//Jetty/ ...
- set集合可以添加重复元素
set集合判断元素的唯一性要重写hashcode和equals方法,这样就能保证不会加入重复的元素, 但是在以下这种情况下任然可以加入重复元素,即使他们的hashcode和equals方法结果相同 p ...
- Python星号*与**用法分析 What does ** (double star/asterisk) and * (star/asterisk) do for parameters? 必选参数 默认参数 可变参数 关键字参数
python中*号**的区别 - CSDN博客 https://blog.csdn.net/qq_26815677/article/details/78091452 定义可变参数和定义 list 或 ...
- 阿里云RDS上的一些概念性记录
刚接触RDS,只能对RDS上的一些特性做一些笔记,方便记忆,以下为RDS上的内容摘录,取自官方文档 1 数据备份 可使用命令行或图形界面进行逻辑数据备份.仅限通过 RDS 管理控制台 或 OPEN A ...
- 我的Android进阶之旅------>adbd cannot run as root in production builds 的解决方法
今天用adb root命令时候,报了错误:adbd cannot run as root in production builds C:\Documents and Settings\Administ ...
- Geforce experience报错：something went wrong try restarting geforce
右键计算机 ——>管理——> 服务和应用程序 ——>服务中