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- ...
随机推荐
- Springboot中jar 重复冲突 导致 静态资源加载问题！
这个jar 其实在common 中也是存在的 ,当时没注意看,就导入进来了,然后 css js 等一些静态资源全部不能加载!具体原因我没去深挖!后面找个时间深挖下,先填坑!
- WordArray (An array of 32-bit words.
CryptoJS中WordArray - qiqi715 - 博客园 http://www.cnblogs.com/qiqi715/p/9623421.html
- add jars、add external jars、add library、add class folder的区别
add external jars = 增加工程外部的包add jars = 增加工程内包add library = 增加一个库add class folder = 增加一个类文件夹 add jar是 ...
- iOS 关于自定义UICollectionViewLayout实现复杂布局
UICollectionView的简单介绍 UICollectionView的结构 Cells Supplementary Views 追加视图 (类似Header或者Footer) Decorati ...
- iOS 横竖屏适配
关于横竖屏适配 也没做过,今天读别人的源码,遇到了.为了了解清楚,就系统的学习一下. 一 横竖屏方向枚举 关于横竖屏一共有三种枚举 UIInterfaceOrientation UIInterface ...
- standard pbr(三）-BRDF
// Default BRDF to use: #if !defined (UNITY_BRDF_PBS) // allow to explicitly override BRDF in custom ...
- java 抽象类实现接口
1.抽象类肯定可以实现接口: 2.这不是有没有意义的事情,是一种思想,当你自己写的类想用接口中个别方法的时候(注意不是所有的方法),那么你就可以用一个抽象类先实现这个接口(方法体中为空),然后再用你 ...
- 如何删除github中的仓库？
使用Github管理项目确实有些好处,但删除仓库(repositories)确实不太好找到. 首先进入要删除的仓库,点击右下角的“settings” 然后拉到页面最下面在danger zone 按“d ...
- ACM解题之（ZOJ 1094) Matrix Chain Multiplication
题目来源: 点击打开链接 题目翻译: 矩阵乘法问题是动态规划的典型例子. 假设你必须评估一个表达式,如A * B * C * D * E,其中A,B,C,D和E是矩阵.由于矩阵乘法是关联的,乘法运算的 ...
- Android:日常学习笔记(5)——探究活动（2）
Android:日常学习笔记(5)——探究活动(2) 使用Intent在活动之间穿梭 什么是Intent Intent时Android程序中各组件之间进行交互的一种重要方式,他不仅可以指明当前组件想要 ...