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- ...
随机推荐
- Olya and Energy Drinks(bfs)
D. Olya and Energy Drinks time limit per test 2 seconds memory limit per test 256 megabytes input st ...
- Xmind 8 update 4 破解教程（破解补丁+破解步骤+下载地址）
一.原始教程 原教程很详细,直接参考: http://www.voidcn.com/article/p-yyybmcqq-bnz.html 若无法访问请点击:http://df1551e3.wiz03 ...
- Log4j将不同Package的日志输出到不同的文件
转自:http://www.crazyant.net/1931.html 随着项目规模的越来越大,会不断的引入新的模块,不同的模块都会打印自己的日志,最后就造成日志根本没法查看,比如我自己的项目中,就 ...
- 巨蟒python全栈开发linux之centos6
1.nginx复习 .nginx是什么 nginx是支持反向代理,负载均衡,且可以实现web服务器的软件 在129服务器中查看,我们使用的是淘宝提供的tengine,也是一种nginx服务器 我们下载 ...
- 前端发起resultUrl请求，服务端收到后做逆向处理，校验sign后，执行originUrl逻辑
originUrl=http://test.com:8080/user/alipay_phone?uid=123&amount=21.3第0步:前后端约定32位密钥KEY第一步:对参数按照ke ...
- 超出字数部分省略(主要解决不兼容;display: -webkit-box;的浏览器)
注明:内容于http://www.cnblogs.com/chentongtong/p/5474553.html进一步整理. 1.现webkit内核的浏览器支持display: -webkit-box ...
- mprotect() failed: Cannot allocate memory
遇到这个问题是在測试项目的性能时发现的,每一个对象分配一页大小的空间然后mprotect() 保护起来,当系统分配3W多个页的时候会出现这个问题. google到在一份邮件列表中也曾提到该问题.htt ...
- Linux中的欢迎信息
本地终端欢迎信息 /etc/issue \d 显示当前系统日期 \s 显示操作系统名称 \l 显示终端的终端号,这个比较常用 \m 显示硬件体系结构,如i386.i68 ...
- 剑指offer 面试46题
面试46题: 题目:把数字翻译成字符串 题:给定一个数字,我们按照如下规则把它翻译为字符串:0翻译成“a”,1翻译成“b”,……,11翻译成“1”,……,25翻译成“z”.一个数字可能有多个翻译.例如 ...
- equal?, == and eql?, ===,
1.BasicObject中定义了 == 和equal?这两个方法,两个方法等价,用来比较两个对象是否是同一个对象,是的话结果就为true. 既然两者相同,为何要定义两个呢?只是为了再命名一个别名吗? ...