vue component :is實現多個元件之間的切換
阿新 • • 發佈:2018-12-22
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue Component 標籤</title> <script type="text/javascript" src="../assets/js/vue.js"></script> </head> <body> <h1>Vue Component 標籤</h1> <hr> <div id="app"> <component v-bind:is="who"></component> <button @click="changeComponent">我變換</button> </div> </body> </html> <script> var componentA={ template:`<div style="color:red">我是 componentA</div>` } var componentB={ template:`<div style="color:green">我是 componentB</div>` } var componentC={ template:`<div style="color:rebeccapurple">我是 componentC</div>` } var app = new Vue({ el:'#app', data:{ who:'componentA' }, components:{ 'componentA':componentA, 'componentB':componentB, 'componentC':componentC }, methods:{ changeComponent:function(){ if(this.who=='componentA'){ this.who='componentB' }else if(this.who=='componentB'){ this.who='componentC' }else{ this.who='componentA' } } } }) </script>