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