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:动态属 ...
随机推荐
- OutputStreramWriter和InputStreamReader类
整个IO类中除了字节流和字符流还包括字节和字符转换流. OutputStreramWriter将输出的字符流转化为字节流 InputStreamReader将输入的字节流转换为字符流 但是不管如何操作 ...
- zip&ftp命令
zip: C:\Users\IBM_ADMIN>zip -09r Oracle.zip ./Oracle/* C:\Users\IBM_ADMIN>ftp ftp> open adm ...
- NMAP为什么扫描不到端口
NMAP为什么扫描不到端口 NMAP是知名的网络端口扫描工具.但很多新人发现,使用NMAP经常扫描不出来任何端口,尤其是手机之类.这实际存在一个理解上的误区.扫描端口是为了发现主机/设备上存在的对 ...
- luoguP4709 信息传递 置换 + 多项式exp
感觉我的做法并不是最优做法... 考虑一个置换\(g\)中的一个置换环\(S\) 在\(g^n\)的形态中,它变为了\(gcd(n, |S|)\)个长度相同的置换环 那么,我们考虑对\(f\)的所有置 ...
- 11.7 NOIP模拟赛
目录 2018.11.7 NOIP模拟 A 序列sequence(two pointers) B 锁lock(思路) C 正方形square(埃氏筛) 考试代码 B C 2018.11.7 NOIP模 ...
- BZOJ.4542.[HNOI2016]大数(莫队)
题目链接 大数除法是很麻烦的,考虑能不能将其条件化简 一段区间[l,r]|p,即num[l,r]|p,类似前缀,记后缀suf[i]表示[i,n]的这段区间代表的数字 于是有 suf[l]-suf[r+ ...
- PHP is_numeric 检测变量是否为数字或数字字符串
bool is_numeric ( mixed $var ) 如果 var 是数字和数字字符串则返回 TRUE,否则返回 FALSE. For example 1: <?php $v = is_ ...
- Node 从安装到跑项目
1,下载 node 链接地址:http://nodejs.cn/ 假设安装到 C:\Program Files\nodejs 2, 设置npm安装程序时的默认位置 npm config set pre ...
- Oracle DML容错处理（2）
关于DML Error Logging效率的问题,摘自网上一篇文章,作为单独一篇说明,原文如下: DML Error Logging in Oracle 10g Database Release 2 ...
- AngularJS中ui-router全攻略
首先是angular-ui-router的基本用法. ■ 如何引用依赖angular-ui-router angular.module('app',["ui.router"]) . ...