vue单选框radio选中事件,根据 选中是值展示另一个下拉选择框的取值,怎么将选中的值传给函数
时间: 2024-03-20 09:41:04 浏览: 30
你可以使用v-model指令将单选框的选中值绑定到Vue组件的data属性中,然后在选中值发生变化时,通过调用触发的事件函数,将选中的值传递给它。例如:
```
<template>
<div>
<label>
<input type="radio" name="options" value="option1" v-model="selectedValue" @change="handleRadioChange">
Option 1
</label>
<label>
<input type="radio" name="options" value="option2" v-model="selectedValue" @change="handleRadioChange">
Option 2
</label>
<div v-if="selectedValue === 'option1'">
<select v-model="selectedOption">
<option value="option1-1">Option 1-1</option>
<option value="option1-2">Option 1-2</option>
</select>
</div>
<div v-if="selectedValue === 'option2'">
<select v-model="selectedOption">
<option value="option2-1">Option 2-1</option>
<option value="option2-2">Option 2-2</option>
</select>
</div>
</div>
</template>
<script>
export default {
data() {
return {
selectedValue: '',
selectedOption: ''
}
},
methods: {
handleRadioChange() {
console.log(this.selectedValue)
// 将选中的值传递给其他函数
// doSomething(this.selectedValue)
}
}
}
</script>
```
在上面的代码中,我们通过v-model指令将单选框的选中值绑定到了data属性中的selectedValue变量上。当选中值发生变化时,会触发@change事件,并调用handleRadioChange函数。在这个函数中,我们就可以通过this.selectedValue来获取当前选中的值,并将它传递给其他函数。
相关推荐
![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_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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)