Vue.js常用指令：v-show和v-if
一、v-show指令
v-show指令可以用来动态的控制DOM元素的显示或隐藏。v-show后面跟的是判断条件，语法如下：
v-show="判断变量"
例如：
v-show="true"，表示显示DOM元素。
v-show="false"， 表示隐藏DOM元素。
看下面的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-show指令</title>
<!--引入vue.js-->
<script src="node_modules/vue/dist/vue.js" ></script>
<script>
window.onload=function(){
// 构建vue实例
new Vue({
el:"#my",
data:{
flag:true,//布尔型
imgList:["img/banner1.jpg","img/banner2.jpg","img/banner3.jpg"]
},
// 方法
methods:{ }
})
}
</script>
</head>
<body>
<div id="my">
<ul>
<li v-for="list in imgList">
<img :src="list" v-show="flag" style="height:100px;width:300px;">
</li>
</ul>
</div>
</body>
</html>
运行效果：
将flag变量改为false，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-show指令</title>
<!--引入vue.js-->
<script src="node_modules/vue/dist/vue.js" ></script>
<script>
window.onload=function(){
// 构建vue实例
new Vue({
el:"#my",
data:{
/* flag:true,//布尔型 */
flag:false,//布尔型
imgList:["img/banner1.jpg","img/banner2.jpg","img/banner3.jpg"]
},
// 方法
methods:{ }
})
}
</script>
</head>
<body>
<div id="my">
<ul>
<li v-for="list in imgList">
<img :src="list" v-show="flag" style="height:100px;width:300px;">
</li>
</ul>
</div>
</body>
</html>
运行效果：
这里只会显示三个<li元素>，但不会显示img元素。
二、v-if指令
v-if指令的用法和v-show指令的用法相同，都是用来控制DOM元素的显示或隐藏。代码示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-if指令</title>
<!--引入vue.js-->
<script src="node_modules/vue/dist/vue.js" ></script>
<script>
window.onload=function(){
// 构建vue实例
new Vue({
el:"#my",
data:{
flag:true,//布尔型
imgList:["img/banner1.jpg","img/banner2.jpg","img/banner3.jpg"]
},
// 方法
methods:{ }
})
}
</script>
</head>
<body>
<div id="my">
<ul>
<li v-for="list in imgList">
<img :src="list" v-if="flag" style="height:100px;width:300px;">
</li>
</ul>
</div>
</body>
</html>
运行效果：
三、v-show和v-if的区别
v-show和v-if都可以用来控制DOM元素的显示或隐藏，那么这两个指令有什么区别呢？
v-show和v-if指令的区别主要在于设置DOM元素隐藏的时候：
v-show指令设置隐藏是为该元素添加css样式--display:none,但DOM元素还存在
v-if指令设置隐藏是将DOM元素整个删除，DOM元素不在存在
看下面的示例：
v-show设置隐藏：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-show指令</title>
<!--引入vue.js-->
<script src="node_modules/vue/dist/vue.js" ></script>
<script>
window.onload=function(){
// 构建vue实例
new Vue({
el:"#my",
data:{
/* flag:true,//布尔型 */
flag:false,//布尔型
imgList:["img/banner1.jpg","img/banner2.jpg","img/banner3.jpg"]
},
// 方法
methods:{ }
})
}
</script>
</head>
<body>
<div id="my">
<ul>
<li v-for="(list,index) in imgList">
<!-- <img :src="list" v-show="flag" style="height:100px;width:300px;"> -->
<!--索引等于1的时候显示，索引不等于1的时候隐藏-->
<img :src="list" v-show="index==1" style="height:100px;width:300px;">
</li>
</ul>
</div>
</body>
</html>
检查元素：
从生成的HTML结构中可以看出，索引不等于的元素被隐藏了，只是添加了CSS样式：display:node，但是该元素还存在。下面看看v-if
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-if指令</title>
<!--引入vue.js-->
<script src="node_modules/vue/dist/vue.js" ></script>
<script>
window.onload=function(){
// 构建vue实例
new Vue({
el:"#my",
data:{
flag:true,//布尔型
imgList:["img/banner1.jpg","img/banner2.jpg","img/banner3.jpg"]
},
// 方法
methods:{ }
})
}
</script>
</head>
<body>
<div id="my">
<ul>
<li v-for="(list,index) in imgList">
<!-- <img :src="list" v-if="flag" style="height:100px;width:300px;"> -->
<!--索引等于1的时候显示，索引不等于1的时候隐藏-->
<img :src="list" v-if="index==1" style="height:100px;width:300px;">
</li>
</ul>
</div>
</body>
</html>
检查元素：
从生成的HTML结构中可以看出，索引不等于1的元素被隐藏了，这里是直接删除了img元素，不占用位置。
更详细的区别：（借鉴别人博客内容，博客地址：https://www.cnblogs.com/wmhuang/p/5420344.html）
三、v-else指令
v-else指令不需要表达式，但有一个限制条件：前一兄弟元素必须有v-if或者v-else-if指令。
用法：为 v-if 或者 v-else-if 添加“else 块”。
看下面的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue指令：v-if v-else</title>
<!--引入vue.js-->
<script src="./js/vue.js"></script> </head>
<body>
<div id="app">
<h1>num值：{{num}}</h1>
<div v-if="num > 5" id="div1">
Now you see me
</div>
<!--v-else指令不需要表达式，配合前面的v-if使用-->
<div v-else>
Now you don't
</div>
</div>
<script>
// 实例化Vue对象
var vm = new Vue({
// 挂载元素
el:"#app",
data:{
num:Math.random()
},
methods:{ }
});
</script>
</body>
</html>
浏览器运行结果：
可以看到：num的值不大于5，所以v-if表达式的值为false，所以会显示v-else指令所在标签。
四、v-else-if
v-else-if使用限制：前一兄弟元素必须有v-if或者v-else-if。
用法：v-else-if表示v-if的“else-if”块，可以链式调用。
看下面代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue指令：v-if v-else</title>
<!--引入vue.js-->
<script src="./js/vue.js"></script> </head>
<body>
<div id="app">
<!-- <h1>num值：{{num}}</h1>
<div v-if="num > 5" id="div1">
Now you see me
</div> -->
<!--v-else指令不需要表达式，配合前面的v-if使用-->
<!-- <div v-else>
Now you don't
</div> --> <div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
</div>
<script>
// 实例化Vue对象
var vm = new Vue({
// 挂载元素
el:"#app",
data:{
num:Math.random(),
type: 'B'
},
methods:{ }
});
</script>
</body>
</html>
浏览器运行结果：
Vue.js常用指令：v-show和v-if的更多相关文章
- 02: vue.js常用指令
目录:Vue其他篇 01: vue.js安装 02: vue.js常用指令 目录: 1.1 vuejs简介 1.2 选择器:根据id.class等查找 1.3 静态绑定数据 data 1.4 插值 { ...
- Vue - vue.js 常用指令
Vue - vue.js 常用指令 目录: 一. vuejs模板语法之常用指令 1. 常用指令: v-html 2. 常用指令: v-text 3. 常用指令: v-for 4. 常用指令: v-if ...
- vue.js常用指令
本文摘自:http://www.cnblogs.com/rik28/p/6024425.html Vue.js的常用指令 上面用到的v-model是Vue.js常用的一个指令,那么指令是什么呢? Vu ...
- 【Vue】vue.js常用指令
http://www.cnblogs.com/rik28/p/6024425.html Vue.js的指令是以v-开头的,它们作用于HTML元素,指令提供了一些特殊的特性,将指令绑定在元素上时,指令会 ...
- Vue.js常用指令：v-for
一.什么是v-for指令 在Vue.js中,我们可以使用v-for指令基于源数据重复渲染元素.也就是说可以使用v-for指令实现遍历功能,包括遍历数组.对象.数组对象等. 二.遍历数组 代码示例如下: ...
- 新人成长之入门Vue.js常用指令介绍（一）
写在前面 作为一个刚步入职场工作的新人,对于公司中所用的技术和框架基本上不懂,只能从最基础的开始做起,进入公司接触的第一个框架就是前端框架Vue.js,几个功能做下来,觉得Vue.js首先学习起来真的 ...
- Vue.js常用指令：v-model
一.v-model指令 v-model 用来获取表单元素的值.对应input输入框获取的是输入的值,单选按钮.复选框.下拉框获取的是选择的状态. 代码示例如下: <!DOCTYPE html&g ...
- Vue.js常用指令：v-on
一.v-on指令 v-on指令在Vue.js中用来处理对应的事件.用法: v-on:事件类型="函数体" 例如:点击按钮的时候执行play事件 <button v-on:cl ...
- Vue.js常用指令：v-bind
一.什么是v-bind指令 v-bind指令用于响应更新HTML特性,允许将一个或多个属性动态绑定到表达式.v-bind是应用在动态属性上面的. 二.语法 v-bind语法如下: v-bind:动态属 ...
随机推荐
- PlantUML windows android
dot执行程序. 渲染 url 连接(花费大量时间) 错误 和 语法注释 (是还在实验的) 缓存大小 5 在键入和渲染之间的延迟 (毫秒) 100
- AGC01 A - BBQ Easy
目录 题目链接 题解 代码 题目链接 AGC01 A - BBQ Easy 题解 贪心 排序之后从大到小,没两组取小的那个 代码 #include<cstdio> #include< ...
- [NOIp2009普及组]细胞分裂
思路: 首先将$30000$以内的所有质数求出,再对$m1$质因数分解. 对于每个$s$,计算它和$m1$的每个公共质因数的倍数关系,取$max$则为该细胞满足条件所花费的最少时间. 再对于每个细胞的 ...
- SpringMVC页面传值
public ModelAndView query(){ ModelAndView modelAndView = new ModelAndView(); List list = new ArrayLi ...
- Tidis单机部署
拉取镜像 docker pull yongman/tidis:latest docker pull pingcap/tikv docker pull pingcap/pd 运行pd,由于Raft算法3 ...
- __x__(24)0907第四天__ display 和 visibility
<a>百度</a> 也是内联元素,无法设置width和height <img>可以设置width和height,但是不会占用一行,所以是典型的行内块元素inl ...
- 使用 IntraWeb (36) - TIWServerControllerBase
每个应用须有且只有一个 Server Controller. TIWServerControllerBase 所在单元及继承链: IWServerControllerBase.TIWServerCon ...
- pycharm如何设置python版本、设置国内pip镜像、添加第三方类库
直接上图(mac环境): 一.设置项目的python版本 File->Default Settings ... 在弹出的界面上(参考下图),左上角的下拉框里,选择python解释器的版本即可(建 ...
- js，html-点击直接跳转到页面底/顶部
案例一:js控制,无滑动效果 <html> <body> <a href="javascript:void(0);" onclick="ja ...
- windows多线程同步--临界区
推荐参考博客:秒杀多线程第五篇 经典线程同步 关键段CS 关于临界区的观念,一般操作系统书上面都有. 适用范围:它只能同步一个进程中的线程,不能跨进程同步.一般用它来做单个进程内的代码快同步,效率 ...