Vue-ում radio-ի հետ աշխատելը

radio-ի հետ աշխատելը տեղի է ունենում նույն կերպ։ Եկեք գործնականում նայենք։ Սկսելու համար ստեղծենք choice հատկությունը, որը մենք կկապենք radio խմբի հետ։

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

Հիմա ստեղծենք radio խումբ։

App.vue<template>
  <input name="radio" type="radio">
  <input name="radio" type="radio">
  <input name="radio" type="radio">
</template>

Յուրաքանչյուրին գրենք v-model դիրեկտիվան և կապենք այն choice հատկության հետ։

App.vue<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>

Յուրաքանչյուրին տանք նաև իր value-ն։

App.vue<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>

Հիմա choice հատկության մեջ միշտ կլինի նշված radio-ի value-ն։

App.vue<template>
  you choosed: {{ choice }}
</template>
Задание 1

radio խմբի օգնությամբ հարցրեք օգտատիրոջը, թե որն է նրա համար մայրենի լեզուն։ Ապահովեք, որ ընտրված լեզուն ցուցադրվի պարբերության մեջ։

Задание 2

Փոփոխեք նախորդ առաջադրանքը հետևյալ կերպ. եկեք ունենանք երեք պարբերություններ տարբեր լեզուներով տեքստերով։ Կախված օգտատիրոջ ընտրությունից՝ ցուցադրեք արտահայտությունը նրա ընտրած լեզվով։