Ir al contenido

Variables y expresiones ​

Traducción automática

Esta página se tradujo automáticamente del inglés y todavía no la revisó un hablante nativo; las correcciones son bienvenidas en GitHub. Si algo no coincide, vale el original en inglés.

Tarea: guardar valores en variables y calcular con ellos.

yaml
# Recipe: variables with q:set, and expressions in braces.
paths:
  components: ./components

q:set guarda un valor con un nombre. Las llaves calculan con él: en un atributo q: y en el HTML. type="number" convierte el texto en número, y un valor que es una sola expresión conserva su tipo, así que total es un número. operation="increment" cambia una variable en su lugar, y la página se ejecuta de arriba abajo: total se calculó antes de que quantity creciera. default se guarda cuando el valor está vacío o no existe, como ?note= en una visita sin parámetros.

xml
<q:component name="Receipt">
  <q:set name="item" value="Coffee beans" />
  <q:set name="price" type="number" value="12.5" />
  <q:set name="quantity" type="number" value="3" />
  <!-- A value that is one expression keeps its type: total is a number. -->
  <q:set name="total" value="{price * quantity}" />
  <!-- default is stored when the value is empty or missing. -->
  <q:set name="note" value="{query.note}" default="no note" />
  <q:set name="quantity" operation="increment" />

  <html>
  <body>
    <h1>{upper(item)}</h1>
    <p>{quantity} bags at {price} = {total}</p>
    <p>With the extra bag: {price * quantity}</p>
    <p>Note: {note}</p>
  </body>
  </html>
</q:component>
xml
<q:test name="expressions compute with the variables" page="/">
  <test:visit />
  <test:expect text="COFFEE BEANS" />
  <test:expect text="4 bags at 12.5 = 37.5" />
  <test:expect text="With the extra bag: 50.0" />
  <test:expect var="total" value="37.5" />
</q:test>

<q:test name="the default fills an empty value" page="/">
  <test:visit />
  <test:expect text="Note: no note" />
</q:test>

<q:test name="a value from the URL replaces the default" page="/?note=gift">
  <test:visit />
  <test:expect text="Note: gift" />
</q:test>
text
tests/receipt.test.q
  PASS  expressions compute with the variables
  PASS  the default fills an empty value
  PASS  a value from the URL replaces the default
3 passed, 0 failed

Ver SET-1, SET-3 y SET-5.

Licencia MIT · Hecho con VitePress