vue展开收起(2)

作者: 露露璐璐 | 来源:发表于2018-05-29 18:38 被阅读0次

vue展开收起(2)
vue展开收起
底部可拖动列表
vue实现展开全部，收起全部
基于vue展开收起动画
Vue实现点击展开收起功能
vue中展开收起的实现方式
vue-展开收起按钮的实现
css展开收起
2021-04-15 vue css 实现多行文本溢出超过指定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            height:500px;
            background-color:black;
            overflow: hidden;
        }
        .mybox-leave-active,.mybox-enter-active{
            transition:  all 1s ease;
        }
        .mybox-leave-active,.mybox-enter{
            height:0px !important;
        }
        .mybox-leave,.mybox-enter-active{
            height: 500px;
        }
    </style>
</head>
<body>
<div id="box">

        <div class="hello">
            <div v-for='item in showList'>{{item}}</div>
            <div @click="showAll = !showAll" class="show-more">{{word}}</div>
        </div>

</div>
</body>
<script src="http://cdn.bootcss.com/vue/1.0.17/vue.min.js"></script>
<script>
    new Vue({
        el:'#box',
        data:{
            boxshow:false,
            showList:[
                'html','css','javascript','java','php'  //进行显示的数据
            ],
            showAll:false,
        },
        methods:{

            togglebox:function(){
                this.boxshow = !this.boxshow;
            }
        },
    computed:{
        showList:function(){
            if(this.showAll == false){          //当数据不需要完全显示的时候
                var showList = [];　　　　　　　　　　　　　　　 //定义一个空数组
                if(this.toLearnList.length > 3){　　　　　　　//这里我们先显示前三个
                    for(var i=0;i<3;i++){
                        showList.push(this.toLearnList[i])
                    }
                }else{
                    showList = this.toLearnList
                }
                return showList;　　　　　　　　　　　　　　　　 //返回当前数组
            }else{
                return this.toLearnList;
            }
        },
        word:function(){
            if(this.showAll == false){　　　　　　　　　　　//对文字进行处理
                return '点击展开'
            }else{
                return '点击收起'
            }
        }
    }
    });
</script>
</html>