vue select的男女性别选择获取值,选择不同的,打印出不同的值
时间: 2024-04-09 13:27:44 浏览: 13
你可以通过使用`v-model`指令来获取`vue select`组件的选中值,并根据选中的值来打印不同的结果。
首先,在`vue select`组件中定义一个选项数组,其中包含男性和女性两个选项:
```html
<template>
<div>
<select v-model="selectedGender">
<option value="male">男</option>
<option value="female">女</option>
</select>
</div>
</template>
```
然后,在`data`中定义一个`selectedGender`属性来存储选中的值:
```javascript
<script>
export default {
data() {
return {
selectedGender: '' // 存储选中的值
}
}
}
</script>
```
接下来,在`watch`中监听`selectedGender`的变化,并根据选中的值打印不同的结果:
```javascript
<script>
export default {
data() {
return {
selectedGender: ''
}
},
watch: {
selectedGender(newValue) {
if (newValue === 'male') {
console.log('选择了男性')
} else if (newValue === 'female') {
console.log('选择了女性')
}
}
}
}
</script>
```
这样,当你选择不同的性别时,会根据选中的值打印出不同的结果。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)