<!-- <!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>