Vue练习十五:02_09_单一按钮显示隐藏
Demo 在线地址:
https://sx00xs.github.io/test/15/index.html
---------------------------------------------------------------
ide: vscode
文件格式:.vue
解析:(待补)
<template>
<div id="app">
<div class="outer">
<h2 @click="handleShow"
:class="{open:show}"
>播放列表...</h2>
<ul v-show="!show">
<li v-for="item in lists" :key="item">
<a href="#">{{item}}</a>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
data:function(){
return{
show:false,
lists:[
'玩家之徒 - 蔡依林',
'原谅我就是这样的女生 - 戴佩妮',
'猜不透 - 丁当',
'自导自演 - 周杰伦',
'浪漫窝 - 弦子',
'流年 - 王菲'
]
}
},
methods:{
handleShow(){
this.show=!this.show
}
}
}
</script>

浙公网安备 33010602011771号