v-show
1、作用:控制元素显示隐藏
2、语法:v-show="表达式“ 表达式值true显示,false隐藏
3、原理:切换disply:none控制显示隐藏
4、场景:频繁切换显示隐藏的场景
例如:
v-if
1、作用:控制元素显示隐藏(条件渲染)
2、语法:v-if="表达式“ 表达式值true显示,false隐藏
3、原理:基于条件判断,是否创建或移除元素节点
4、场景:要么显示,要么隐藏,不频繁切换的场景
例如:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="vue.js" ></script> </head> <body> <div id="app"> <div v-show="flag" clss="box">我是v-show</div> <div v-if="flag" clss="box">我是v-if</div> </div> <script> const app=new Vue({ el:"#app", data:{ flag:true } }) </script> </body> </html>
true:显示结果
false:隐藏结果