Làm việc với radio trong Vue

Làm việc với radio diễn ra theo cách tương tự. Hãy cùng xem xét trong thực tế. Đầu tiên, hãy tạo thuộc tính choice, mà chúng ta sẽ ràng buộc với một nhóm radio:

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

Bây giờ hãy tạo một nhóm radio:

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

Hãy viết chỉ thị v-model cho mỗi phần tử và ràng buộc nó với thuộc tính choice:

<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>

Đồng thời, hãy gán cho mỗi phần tử một value riêng:

<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>

Bây giờ trong thuộc tính choice sẽ luôn chứa value của radio được chọn:

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

Hãy hỏi người dùng bằng cách sử dụng một nhóm radio, ngôn ngữ nào là tiếng mẹ đẻ của họ. Hãy làm sao cho ngôn ngữ được chọn hiển thị trong một đoạn văn.

Hãy sửa đổi bài toán trước như sau: giả sử chúng ta có ba đoạn văn với văn bản bằng các ngôn ngữ khác nhau. Tùy thuộc vào lựa chọn của người dùng, hãy hiển thị cụm từ bằng ngôn ngữ mà họ đã chọn.