vue实现单击一个按钮后，切换盒子的展开和收起状态

最新推荐文章于 2024-04-26 17:54:13 发布

南蓬幽

最新推荐文章于 2024-04-26 17:54:13 发布

阅读量3.8k

点赞数 3

分类专栏： web 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_46556714/article/details/121271489

版权

web 专栏收录该内容

16 篇文章 29 订阅

订阅专栏

实现单击一个按钮后，切换盒子的展开和收起状态

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <div>
          <div v-for='item in showList'>{{item}}</div>
          <button @click="showAll = !showAll" class="status">{{flag}}</button>
        </div>
      </div>
      <!-- 一开始只显示4个数据，点击展开显示全部 -->
<script type = "text/javascript">
    var vm = new Vue({
      el:'#app',
      data() {
        return {
          fruitList:[
          '首页','电影','动漫','电视剧','更多'  // 进行显示的数据
          ],
          showAll:false,   // 标记数据是否需要完全显示的属性
        } 　
      },
      computed:{
        showList:function(){
          if(this.showAll == false){
            var showList = [];
            if(this.fruitList.length > 4){　　// 一开始显示前4个数据
              for(var i=0;i<4;i++){
                showList.push(this.fruitList[i])
              }
            }else{
              showList = this.fruitList
            }
            return showList;
          }
          else{
            return this.fruitList;
          }
        },
        flag:function(){
          if(this.showAll == false){
            return '单击展开'
          }
          else{
            return '单击收起'
          }
        }
      }
    })
  </script>    
</body>
</html>

南蓬幽

关注

3
点赞
踩
23

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue实现单击一个按钮后，切换盒子的展开和收起状态

实现单击一个按钮后，切换盒子的展开和收起状态!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
复制链接

扫一扫