1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="../lib/js/vue.js"></script> 7 </head> 8 <body> 9 <div id="app"> 10 <a the href = "" @ click.prevent = "comName = 'Login'" > log </ A > . 11 < A the href = "" @ click.prevent = "comName = 'Register'" > Register </ A > 12 is <! - VUE provides a display assembly to the corresponding component name -> 13 is <-! component is a placeholder,: is the attribute used to specify the name of the component can be displayed -> 14 < component : iS = " comName " > </ Component > 15 </ div > 16 <script> 17 Vue.component ( ' Login ' , { 18 is Template: ' <H3> Logon. </ H3> ' . 19 }); 20 is Vue.component ( ' Register ' , { 21 is Template: ' <H3> register component </ h3> ' 22 is }); 23 is const VM = new new Vue ({ 24 EL: ' #app ' , 25 Data: { 26 is comName: ' Login ' // current component of:Name of the component is bound 27 }, 28 methods:{} 29 }) 30 </script> 31 </body> 32 </html>
Day3.14 two way switch assembly
Guess you like
Origin www.cnblogs.com/zhaohui-116/p/12057331.html
Recommended
Ranking