v-show · Vue從入門到實戰

## v-show **類型：** any **用法：** 根據表達式之真假值，切換元素的 display CSS 屬性。當條件變化時該指令觸發過渡效果。 >[info]示例： ~~~ <h1 v-show="ok">Hello!</h1> ~~~ >[danger] 帶有 v-show 的元素始終會被渲染并保留在 DOM 中。 v-show 是簡單地切換元素的 CSS 屬性 display 。注意， v-show 不支持 <template> 語法，也不支持 v-else。下面我們通過設置block的值，來決定ul在頁面是顯示。 >[success] 代碼示例1 ~~~ <ul id="demo" v-show="block"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <script> var app=new Vue({ el:'#demo', data:{ block:true } }); </script> ~~~ >[success]預覽：https://ityanxi.github.io/Vue-tutorial/chapter04/03v-show1.html 如果將block的值設為false,頁面上將不再顯示ul,但ul仍還在DOM中 ![](https://box.kancloud.cn/eab1c1818bed520ab92f672687a0f53f_505x244.png) ----- >[success] 代碼示例2 ~~~ <div id="app"> <h1>Hello,Vue js!!</h1> <h1 v-show='yes'>Yes!</h1> <h1 v-show='no'>No!</h1> <h1 v-show='age >=25'>Age:{{age}}</h1> <h1 v-show='name.indexOf("jack") >=0'>Name:{{name}}</h1> </div> <script type="text/javascript"> var vm=new Vue({ el:'#app', data:{ yes:true, no:false, age:28, name:'abcdefg' } }) </script> ~~~ >[success]預覽：https://ityanxi.github.io/Vue-tutorial/chapter04/03v-show2.html ------ >[success] 代碼示例3 ~~~ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> li{ font:30px/50px "微軟雅黑"; background: green; margin:10px; } .div1{ width: 200px; height: 200px; background: red; } </style> <script src="vue.js"></script> <script type="text/javascript"> window.onload=function(){ new Vue({ el: '#box', data:{ a:true, } }) } </script> </head> <body> <div id="box"> <input type="button" value="按鈕1click" v-on:click='a=false' /> <hr /> <div class="div1" v-show='a'></div> </div> </body> </html> ~~~ >[success]預覽：https://ityanxi.github.io/Vue-tutorial/chapter04/03v-show3.html