v-show
类型： any
用法： 根据表达式之真假值，切换元素的 display CSS 属性。当条件变化时该指令触发过渡效果。
示例：
<h1 v-show="ok">Hello!</h1>带有 v-show 的元素始终会被渲染并保留在 DOM 中。
v-show 是简单地切换元素的 CSS 属性 display 。
注意， v-show 不支持 语法，也不支持 v-else。
下面我们通过设置block的值，来决定ul在页面是显示。
代码示例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中
-----
>[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>
<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>
>[success]预览：https://ityanxi.github.io/Vue-tutorial/chapter04/03v-show3.html