Vue系列之 => 元件切換
阿新 • • 發佈：2019-01-01
元件切換方式一
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9<script src="./lib/jquery2.1.4.min.js"></script> 10 <script src="./lib/Vue2.5.17.js"></script> 11 <link href="https://cdn.bootcss.com/animate.css/3.7.0/animate.css" rel="stylesheet"> 12 </head> 13 14 <body> 15 <div id="app"> 16 <a href="" @click.prevent="flag=true">登入</a> 17<a href="" @click.prevent="flag=flase">註冊</a> 18 <login v-if="flag"></login> 19 <register v-else="flag"></register> 20 </div> 21 22 <template id="userlogin"> 23 <div> 24 <h1>使用者登入介面</h1> 25</div> 26 </template> 27 28 <template id="userreg"> 29 <div> 30 <h1>使用者註冊介面</h1> 31 </div> 32 </template> 33 <script> 34 Vue.component('login',{ 35 template : '#userlogin' 36 }); 37 38 Vue.component('register',{ 39 template : '#userreg' 40 }) 41 42 var vm = new Vue({ 43 el: '#app', 44 data: { 45 flag : true 46 }, 47 methods: {}, 48 }) 49 </script> 50 </body> 51 52 </html>
元件切換方式二(加上動畫)
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <script src="./lib/jquery2.1.4.min.js"></script> 10 <script src="./lib/Vue2.5.17.js"></script> 11 <link href="https://cdn.bootcss.com/animate.css/3.7.0/animate.css" rel="stylesheet"> 12 </head> 13 <style> 14 .v-enter, 15 .v-leave-to{ 16 opacity: 0; 17 transform: translateX(150px); 18 } 19 20 .v-enter-active, 21 .v-leave-active{ 22 transition: all 0.5s ease; 23 } 24 </style> 25 26 <body> 27 <div id="app"> 28 <a href="" @click.prevent="comName='login'">登入</a> 29 <a href="" @click.prevent="comName='register'">註冊</a> 30 <!-- 這是vue提供的 component 元素來展示對應名稱的元件 --> 31 <!-- component是一個佔位符， :is 屬性用來指定要展示的元件的名稱 --> 32 <!-- 元件名稱是字串，要用引號包起來 --> 33 <!-- <component :is="'register'"></component> --> 34 <!-- 使用變數的方式方便控制 --> 35 <!-- 設定mode屬性值為out-in，動畫先出去再進來 --> 36 <transition mode="out-in"> 37 <component :is="comName"></component> 38 </transition> 39 <!-- VUE提供的標籤 ， component,template,transition, transitionGroup --> 40 </div> 41 42 <template id="userlogin"> 43 <div> 44 <h1>這是登入元件</h1> 45 </div> 46 </template> 47 48 <template id="userreg"> 49 <div> 50 <h1>這是註冊元件</h1> 51 </div> 52 </template> 53 <script> 54 Vue.component('login',{ 55 template : '#userlogin' 56 }); 57 58 Vue.component('register',{ 59 template : '#userreg' 60 }) 61 62 var vm = new Vue({ 63 el: '#app', 64 data: { 65 comName : 'login' //當前component中的 :is 繫結的元件名稱 66 }, 67 methods: {}, 68 }) 69 </script> 70 </body> 71 72 </html>