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=

南蓬幽

3953人浏览 · 2021-11-11 16:57:46

南蓬幽 · 2021-11-11 16:57:46 发布

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

!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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^