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- ...
随机推荐
- <转> 堆和栈的区别
一.预备知识—程序的内存分配 一个由C/C++编译的程序占用的内存分为以下几个部分 1.栈区(stack)— 由编译器自动分配释放,存放函数的参数值,局部变量的值等.其操作方式类似于数 ...
- Xamarin.Forms学习之XAML命名空间
大家好,我又悄咪咪的来了,在上一篇的Xamarin文章中简单介绍了Xamarin的安装过程,妈蛋没想到很多小朋友很感激我,让他们成功的安装了Xamarin,然后......成功的显示了经典的两个单词( ...
- golang 面向对象
深入理解GO语言的面向对象_Golang_脚本之家 https://www.jb51.net/article/94030.htm 深入理解GO语言的面向对象 更新时间:2016年10月04日 10:4 ...
- 【原创】学习CGLIB动态代理中遇到的问题
代码清单1 CGLIB动态代理 package wulj.proxy.cglibProxy; import java.lang.reflect.Method; import net.sf.cglib. ...
- 修改 /var/lib/locales/supported.d/local 文件（使用 locale -a 命令查看系统中所有已配置的 locale）
转自:http://zyxhome.org/wp/cc-prog-lang/c-stdlib-setlocale-usage-note/ http://www.west263.com/info/htm ...
- 基于Django的Disqus如何支持每月80亿PV（转）
原文:基于Django的Disqus如何支持每月80亿PV 本文由 伯乐在线 - 贱圣OMG 翻译.未经许可,禁止转载!英文出处:Matt Robenolt.欢迎加入翻译小组. 现在我们Disqus能 ...
- 简述OSI七层协议模型、TCP/IP四层模型和五层协议之间的关系
一.OSI七层模型 OSI七层协议模型主要是:应用层(Application).表示层(Presentation).会话层(Session).传输层(Transport).网络层(Network).数 ...
- c语言复制文件程序
#include <stdio.h> #include <stdlib.h> #include <string.h> #define SIZE 1024*1024* ...
- Sql多条件排序
多条件排序可以通过在order by语句后面使用case when then条件语句来实现. end 例子: 1.创建表case_test 共有id,case_type,case_location,c ...
- spring下配置shiro
1.web.xml中加入shiro的过滤器: <!-- Spring --> <!-- 配置Spring配置文件路径 --> <context-param> < ...