如何像jquery一样在Alpine js中更改图像src？

Question

有一个带有标签的 div，通过单击小图像我可以更改 src 属性并显示它的原始大小，但我不知道在 Alpine js 中该怎么做？

<div>
<img id="main" />
</div>

/* small images from db */
<div>
foreach($images as $image){
<img id='small' src="images/.$image" />
}
</div>

在 jquery 中：

$("#small").each(function(){
$(this).click(function(){
$("#main").attr('src', $(this).attr('src');)
})
})
})

但我不知道在 Alpine js 中该怎么做？！

Answer 1

像这样的东西（使用 Laravel Blade 语法）？

    <div x-data="{imageUrl: ''}">
      <section>
        <img id="main" :src="imageUrl" />
      </section>

      <hr />

      <div>
        @foreach($images as $image)
            <img id='small' src="{{ images/.$image }}" @click="imageUrl = '{{ images/.$image }}'" />
        @endforeach
      </div>
    </div>

此处用笔用一些虚拟数据进行了演示。