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