vue2.0实现数据的展示和隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue2.513.js"></script>
</head>
<style>
    .show{
        transition: all 0.4s ease;
    }
</style>
<body>
<div id="app">
    <button @click="toggle">显示和隐藏</button>
    <transition @before-enter="beforeEnter" @enter="enter" @after-enter="after">
    <div v-if="isshow" class="show" >hello vuejs</div>
    </transition>
</div>
</body>
<script>

    //vm就变成一个全局的了
    var vm= new Vue({
        el:'#app',
        data:{
            isshow:false
        },
        methods:{
            toggle:function () {
                this.isshow=!this.isshow;
            },
            beforeEnter:function (el) {
                el.style.transform="translate(100px,0)";//开始出现的位置
            },
            enter:function (el,done) {
                el.offsetWidth;//刷新页面
                el.style.transform="translate(0,0)";
                done();
            },
            after:function (el) {
                this.isshow=!this.isshow;
            }
        }

    });
</script>

</html>

//

class="show"这句话主要是用来进行css设置显示的方式和时间
调用done()是让它能快点结束,那不然会有延迟
展开阅读全文

没有更多推荐了,返回首页