vue --- 使用component的 :is属性切换标签页
生活随笔
收集整理的這篇文章主要介紹了
vue --- 使用component的 :is属性切换标签页
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
點擊對應的標簽,下面切換至對應的模板…
總體代碼如下:
<!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的導入.切換效果:
傳送門
總結
以上是生活随笔為你收集整理的vue --- 使用component的 :is属性切换标签页的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ST7789V2 LCD驱动芯片
- 下一篇： 使用Python编写获取QQ群成员昵称及