# 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>
```
