# v-show指令
需求：元素切换显示/隐藏
## v-show指令
首先`v-show`指令当值为true则为显示，值为`false`则为隐藏。
```
<style>
span{display: block;width: 200px; height: 200px;background: pink;}
</style>
<div id="app" >
<button>按钮</button>
<span v-show="status"></span>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
status:false
}
})
</script>
```
## 绑定事件
元素之所以可以显示原因是因为`status`的值为true。也就是说我们将这个数据改为false它就隐藏。我们操作`button`绑定的功能只要把`status`的值改变即可。
1. 直接将事件书写在模板中 `v-on:click="指令名称()"` 或者简写为 `@click="指令名称()"`
2. 指令名称对应的方法要号在js中的`methods`中，这里面写的方式是es6的简写方法，要和大家简单解释即可。在指令中想要访问data中的数据是通过 this 直接加上属性名称即可。
```js
data: {
status:false
},
methods:{
toggle(){
this.status = !this.status;
}
}
```
> 如this.status.其中指令名称()的小括号 写不写都可以，不过要是传参的话，必须带小括号。后面会详细讲
## 完整代码
```html
<style>
span{display: block;width: 200px; height: 200px;background: pink;}
</style>
<div id="app" >
<button @click="toggle()">按钮</button>
<span v-show="status"></span>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
status:false
},
methods:{
toggle(){
this.status = !this.status;
}
}
})
</script>
```
