先祝大家中秋節快樂~開心烤肉快樂賞月呦!

今天要講的是"小圖換大圖"的簡易用法，
像是電商網購就挺需要這功能的，可以給大家參考參考，如下：
css簡單的設定一下小圖大小(示範而已)

<style>
    .small_img img {
        width: 50px;
    }
</style>

html判斷

<div x-data="{image:'moon1'}">
    <div>
        <a href="" @click.prevent="image='moon1'" class="small_img"><img src="./moon1.jpg" alt=""></a>
        <a href="" @click.prevent="image='moon2'" class="small_img"><img src="./moon2.jpg" alt=""></a>
        <a href="" @click.prevent="image='moon3'" class="small_img"><img src="./moon3.jpg" alt=""></a>
    </div>
    <div>
        <img src="./moon1.jpg" alt="" x-show="image=='moon1'">
        <img src="./moon2.jpg" alt="" x-show="image=='moon2'">
        <img src="./moon3.jpg" alt="" x-show="image=='moon3'">
    </div>
</div>

這邊我分別放了3張月亮的照片，
如果事後端撈出來的圖片就可能要先判斷再丟出來，
或是讓它跑迴圈全show出來，
而這邊我設定了click事件和x-show來判斷要顯示誰，
這邊現在是寫死的，就是直接指定誰點到就顯示誰，
比較好的寫法可以試著寫進js中連動去改變點擊和顯示的對象，
那這就只做基本的示範而已。