當前位置：首頁 > 前端技术 > vue >内容正文

vue

vue --- 使用component的 :is属性切换标签页

發布時間：2023/12/10 vue 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 vue --- 使用component的 :is属性切换标签页小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

點擊對應的標簽,下面切換至對應的模板…

// 說明 <component :is="name"></component> // 相當于把id為name的組件放到對應的位置

總體代碼如下:

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><script src="../node_modules/vue/dist/vue.js"></script> </head><body><div id="app"><a href="" @click.prevent="name='login'">登錄</a><a href="" @click.prevent="name='register'">注冊</a><a href="" @click.prevent="name='forget'">忘記密碼</a><component :is="name"></component></div><template id="tmp1"><h3>登錄</h3></template><template id="tmp2"><h3>注冊</h3></template><template id="tmp3"><h3>忘記密碼</h3></template><script>Vue.component('login', {template: '#tmp1'})Vue.component('register', {template: '#tmp2'})Vue.component('forget', {template: '#tmp3'})const vm = new Vue({el: '#app',data: {name: 'login'},methods: {}})</script> </body></html>// 注意vue.js的導入.

切換效果:
傳送門

// html <transition mode="out-in"><component v-bind:is="name"></component> </transition>// 把需要動畫的組件用transition包裹起來 // css <style>.v-enter,.v-leave-to{opacity: 0,transform: translateX(150px);}.v-enter-active,.v-leave-active {transition: all 0.5s ease;} </style>

總結

以上是生活随笔為你收集整理的vue --- 使用component的 :is属性切换标签页的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： ST7789V2 LCD驱动芯片
下一篇： vue --- ref属性获取dom元