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>

 

posted @ 2019-07-29 19:41  sx00xs  阅读(127)  评论(0编辑  收藏  举报