Vue元件切換--comment(適用於多個元件切換)
阿新 • • 發佈：2018-11-05
code:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>元件切換comment--適用於多個元件切換</title> <script type="text/javascript" src="js/vue.js" ></script> </head> <body> <div id="app"> <!-- 注意：直接寫元件名稱，會被當成字串，所以要加上''--> <a href="#" @click.prevent="comName='login'">登入</a> <a href="#" @click.prevent="comName='reqister'">註冊</a> <!--vue 提供了component，來展示對應名稱的元件--> <!--component是一個佔位符，:is屬性可以用來指定要展示的元件的名稱--> <component :is="comName"></component> </div> <script> Vue.component("login",{ data(){ return{ } }, template:` <div> <h3>登入</h3> </div> ` }) Vue.component("reqister",{ data(){ return{ } }, template:` <div> <h3>註冊</h3> </div> ` }) new Vue({ el:"#app", data:{ comName:"login" } }) </script> </body> </html>