[Day 24] 动态元件v-bind:is

大家好，我今天的早餐是吃起司蛋饼好好吃欧~大家都吃什麽咧?
当你在做某些专案时是否会遇到以下问题呢??需要透过标签来切换不同的页面等等，这时候!!!就可以用上动态元件(Dynamic component)。
之前的我可能会使用v-if、v-show来达成这个目的，但今天的我不!一!样!到底哪里不一样咧，一起来看看吧~~~

直接开始

动态元件可以根据传入参数的不同，切换不同的元件，用下面的例子来举例吧!!
当点击画面上的 「可爱」、 「丑爆」、 「帅」，<component>会根据 :is="face"(v-bind:is="face"的缩写)带入的值 :「cute」、 「ugly」、 「handsome」，来决定要载入哪个元件，元件有"你超可爱"、"你丑爆了"、"帅真的帅"这三种。
@click.prevent是v-on:click.prevent的缩写，switchface是事件名称，忘记的话可以翻翻前面的天数!!
这个例子是先以 「cute」当一开始带入的值。

结果长这样

结语

是不是很简单呢!而且也非常实用，喔对了，今天晚餐打算吃麻辣锅烧面想到肚子就饿了:D。