元素的顯示和隱藏-if-else-show
阿新 • • 發佈：2017-10-08
-- temp script nbsp 新版本 隱藏 itl 新版 註意
<!-- <!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。 </script> </html> <!-- 如果要頻繁切換顯示隱藏，就用v-show； 如果要提高整個頁面的加載速度，就用v-if。 -->
元素的顯示和隱藏-if-else-show