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元素,不占用位置。
更详细的区别:(借鉴别人博客内容,博客地址:)
- 1.手段:v-if是动态的向dom树内添加或者删除dom元素;v-show是通过设置dom元素的display样式属性控制显隐;
- 2.编译过程:v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件;v-show只是简单的基于css切换;
- 3.编译条件:v-if是惰性的,如果初始条件为假,则什么也不做;只有在条件第一次变为真时才开始局部编译(编译被缓存?编译被缓存后,然后再切换的时候进行局部卸载); v-show是在任何条件下(首次条件是否为真)都被编译,然后被缓存,而且dom元素保留;
- 4.性能消耗:v-if有更高的切换消耗;v-show有更高的初始渲染消耗;
- 5.使用场景:v-if适合运营条件不大可能改变;v-show适合频繁切换。
四、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的语法是怎样的内容应该都清楚了吧,希望大家阅读完这篇文章能有所收获。最后,想要了解更多Vue.js中如何控制元素的显隐,v-show和v-if的语法是怎样的知识,欢迎关注网络,网络将为大家推送更多相关知识点的文章。
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: Vue.js中如何控制元素的显隐,v-show和v-if的语法是怎样
本文地址: https://pptw.com/jishu/654299.html