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:动态属 ...
随机推荐
- [ 转载 ] Handler详解
带着问题学习 Android Handler 消息机制 Marker_Sky 关注 0.4 2018.02.06 18:04* 字数 3992 阅读 541评论 0喜欢 13 学习 Androi ...
- BZOJ.2177.曼哈顿最小生成树(Kruskal)
\(Solution\) 参考 对于每个点,向唯一有可能与它形成MST的8个点连边,由于是双向单边,所以每个点最多连出4条边(证明见blog) 怎么找到一个区域内最近的点? 只考虑y轴右侧45°的区域 ...
- Java并发程序设计（十）设计模式与并发之Future模式
设计模式与并发之Future模式 核心思想:异步调用. /** * @author: Tang Jiujia * @version: 2017/9/18 0018 15:22 */ public in ...
- Unity Shader-后处理：Bloom全屏泛光
一.简介 今天来学习一下全屏Bloom效果,有时候也叫Glow效果,中文一般叫做“全屏泛光”,这是一种可以模拟出HDR的全屏后处理效果,但是实现原理与HDR相差很远,效果比HDR差一些,但是比HD ...
- .NetCore中EFCore的使用整理（二）-关联表查询
EF常用处理关联加载的方式有3中:延迟加载(Lazy Loading).贪婪加载 (Eager Loading)以及显示加载. 一.EF Core 1.1 1.当前的版本,还不支持延迟加载(Lazy ...
- Asp.Net JsonResult重写
在Json序列化工具中,Newtonsoft.Json 的工具包相对比较好用. 对于循环引用.序列化格式.时间格式等都提供了可配置. 如果想重写Mvc 自带 JsonResult 返回结果,提供了2中 ...
- HTML5 Selection对象
一.实例1,设置网页选中内容并且复制到黏贴板 <p id='txtone'>发的FDSAFSDFDS!其实不管哪个行业, <img src='http://beijing.gongj ...
- C# Callback思维
方式一.用委托作为形参,把结果传回实参方式二.通过接口实现方式三.通过事件关联,适用桌面应用程序方式四.子窗体调用父窗体的函数(委托) 方式一.用委托作为形参,把结果传回实参 public parti ...
- WPF背景图
方法一:xaml中:<控件> <控件.Background><ImageBrush ImageSource="/程序集;component/images/xx ...
- JAVA和C#检测IP地址段是否交叉和获取地址段IP列表的方法
一.说明 我们经常编程时,需要对一个DIDR地段计算其可用IP地址,或者验证某个IP是否被包含在一个地址段中. 二.工具 1.Java 可以使用 cidr-ip-trie库解决. https://gi ...