vue2.0實現資料的展示和隱藏
阿新 • • 發佈：2019-02-19
<!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= newVue({ 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（）是讓它能快點結束，那不然會有延遲