⊗jsvuPmFmRd 48 of 72 menu

Trabajo con radio en Vue

El trabajo con radio se realiza de manera similar. Veámoslo en la práctica. Para empezar, creemos una propiedad choice que vincularemos a un grupo de radio:

data() { return { choice: '', } }

Ahora creemos un grupo de radio:

<template> <input name="radio" type="radio"> <input name="radio" type="radio"> <input name="radio" type="radio"> </template>

Escribamos la directiva v-model en cada uno y vinculemos la propiedad choice a ella:

<template> <input name="radio" type="radio" v-model="choice"> <input name="radio" type="radio" v-model="choice"> <input name="radio" type="radio" v-model="choice"> </template>

Démosle también a cada uno su propio value:

<template> <input name="radio" type="radio" v-model="choice" value="v1"> <input name="radio" type="radio" v-model="choice" value="v2"> <input name="radio" type="radio" v-model="choice" value="v3"> </template>

Ahora en la propiedad choice siempre estará el value del radio marcado:

<template> you choosed: {{ choice }} </template>

Pregunte al usuario mediante un grupo de radio cuál es su lengua materna. Haga que el idioma seleccionado se muestre en un párrafo.

Modifique la tarea anterior de la siguiente manera: que tengamos tres párrafos con texto en diferentes idiomas. Dependiendo de la elección del usuario, muestre la frase en el idioma que haya seleccionado.

Español
AfrikaansAzərbaycanБългарскиবাংলাБеларускаяČeštinaDanskDeutschΕλληνικάEnglishEestiSuomiFrançaisहिन्दीMagyarՀայերենIndonesiaItaliano日本語ქართულიҚазақ한국어КыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNederlandsNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipСрпскиSrpskiSvenskaKiswahiliТоҷикӣไทยTürkmenTürkçeЎзбекOʻzbekTiếng Việt
Usamos cookies para el funcionamiento del sitio, análisis y personalización. El procesamiento de datos se realiza de acuerdo con la Política de privacidad.
aceptar todas configurar rechazar