v-if v-else v-show元素的显示和隐藏
<!-- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="box"> <div v-if='ok'>如果为真显示</div> <div v-else>否则显示这个元素</div> 移除 在查看元素里不显示 </div> <div id="box"> <div v-if='ok'>如果为真显示</div> <div v-if='!ok'>否则显示这个元素</div> </div> </body> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> new Vue({ el:'#box', data:{ ok:'aaa' } }) // 在后面紧跟v-else，可以在ok为false的情况下，显示相应的内容。 // 注意，v-else必须紧跟v-if，否则不会生效。 </script> </html> --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="box"> <div v-show='ok'>如果为真显示</div> <div v-else>否则显示这个元素</div> </div> </body> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> new Vue({ el:'#box', data:{ ok:'aaa' } }) //如果ok为false,<h1 v-show="ok">Hello!</h1>这个节点不会被移除，而仅仅是看不见。 //我们看到v-show后面也可以跟v-else； //在新版本中，v-show不支持<template>语法，也不支持v-else。
//v-if和v-show区别
// v-show 是控制style display 样式 。
// v-if v-else 不显示的 不会加载标签
</script> </html> <!-- 如果要频繁切换显示隐藏，就用v-show； 如果要提高整个页面的加载速度，就用v-if。 -->
//二次视频学习
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-if和v-show</title> <script type="text/javascript" src="js/vue.js"></script> </head> <body> <h1>v-if 和 v-show</h1> <div id="app"> <div v-if="isLogin">请登陆！</div> <!-- 判断v-if 是否为真 为真显示本标签内容 --> <div v-else>你好，蔡蔡！</div> <!-- 以上条件不成立显示本标签内容 --> <div v-show="isLogin">v-show 内容</div> <!--判断isLogin是否为真 为真显示 --> </div> </body> <script type="text/javascript"> new Vue({ el:"#app", data:{ isLogin:false } }) //v-if和v-show区别 // v-show 是控制style display 样式 。 // v-if v-else 不显示的 不会加载标签 </script> </html>
