Atributos

Class and Style Bindings
Complemenando la clase, se posee varias formas de realizar la declaración de ambos:
Object Syntax
Para Class:

<div :class="{ active: isActive }"></div>

Para Style:

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

Array Syntax
Para Class:

<div :class="[activeClass, errorClass]"></div>

Para Style:

<div :style="[baseStyles, overridingStyles]"></div>

La diferencia de un usos radica en el comportamiento que deseemos representar. Por ejemplo, si deseamos representar un evento condicional, class binding; si es una representación de composición (generalmente apoyada por la metodología BEM), style binding.

Para la sintaxis de los tumbnails, también se puede usar otro tipo de concatenación por si a alguien le gusta más. De esta manera.

:style="{ backgroundImage: `url(${product.images[0].thumbnail})` }"></div>

tambien así

<div class="thumb" :class="active: state">

state:{
	active_image=true
}

Este fue el comportamiento que quise simular en la práctica del mini Vue jaja, quise hacerlo con el formato v-bind:attr="value".
.
En Vue puedes tener un atributo normal y el mismo atributo bindeado sin problemas, Vue se encargará de resolver esto y al renderizar mezclará ambos, es por eso que podemos tener esto:

<div 
class="thumb" 
:class="{ active: activeImage == 0 }" 
>

Dejo mi código:
.
https://github.com/RetaxMaster/vue3-platzi-commerce/tree/71549d92aabc726c884cdc2e63d234de0aeb05f0

Muy buena esta clase, no tenia muy claro lo de atributos dinamicos mas que nada por las clases ahora si estoy ready jeje.

Qué concatenación! más absurda!!!