<!DOCTYPE html> <html>
<head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/animate.css" /> <style type="text/css"> .dv { width: 200px; height: 400px; background-color: black; transform: translateY(100%); position: fixed; right: 0; bottom: 0; z-index: 5; } .btn { position: fixed; right: 0; bottom: 0; z-index: 10; } .dis { } </style> </head>
<body> <div id="app"> <div class="dv" v-bind:class="{animated:da,slideOutDown:isactive,slideInUp:!isactive}">
</div> <button type="button" v-on:click="open">点击</button> <button type="button" v-on:click="close">点击2</button> </div> </body> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { isactive: true, da:false }, methods: { open: function() { this.isactive = false; this.da=true; }, close:function () { this.isactive=true; } } }) </script>
</html>
