2019-10-21 14:49:08 +08:00
|
|
|
# Group
|
2020-01-28 23:15:39 +08:00
|
|
|
A radio group look elegant.
|
2019-10-21 14:49:08 +08:00
|
|
|
```html
|
2020-02-17 09:55:20 +08:00
|
|
|
<n-radio-group v-model="value" name="radiogroup">
|
2019-10-21 14:49:08 +08:00
|
|
|
<n-radio
|
|
|
|
v-for="song in songs"
|
|
|
|
:key="song.value"
|
|
|
|
:value="song.value"
|
|
|
|
>
|
|
|
|
{{ song.label }}
|
|
|
|
</n-radio>
|
|
|
|
</n-radio-group>
|
|
|
|
```
|
|
|
|
```js
|
|
|
|
export default {
|
|
|
|
data () {
|
|
|
|
return {
|
|
|
|
value: null,
|
|
|
|
songs: [
|
|
|
|
{
|
|
|
|
value: 'Rock\'n\'Roll Star',
|
|
|
|
label: 'Rock\'n\'Roll Star'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
value: 'Shakermaker',
|
|
|
|
label: 'Shakermaker'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
value: 'Live Forever',
|
|
|
|
label: 'Live Forever'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
value: 'Up in the Sky',
|
|
|
|
label: 'Up in the Sky'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
value: '...',
|
|
|
|
label: '...'
|
|
|
|
}
|
|
|
|
].map(s => {
|
|
|
|
s.value = s.value.toLowerCase()
|
|
|
|
return s
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
```
|