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>