<el-radio v-model="ruleForm.method" label="1" @click="changeLabel($event,'电话')">电话登录</el-radio>
时间: 2023-07-03 13:16:34 浏览: 62
这个代码片段中的`<el-radio>`标签与前一个问题中的标签非常类似,只是多了一个@click事件和传入的参数不同。如果您想要在点击"电话登录"这个选项时触发一个函数并传入一个参数"电话",您可以使用以下代码:
```
<template>
<el-form :model="ruleForm">
<el-form-item label="登录方式" prop="method">
<el-radio v-model="ruleForm.method" label="1" @click="changeLabel($event, '电话')">电话登录</el-radio>
<el-radio v-model="ruleForm.method" label="2" @click="changeLabel($event, '邮箱')">邮箱登录</el-radio>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
ruleForm: {
method: ''
}
}
},
methods: {
changeLabel(event, value) {
console.log(value); // 输出"电话"或"邮箱"
}
}
}
</script>
```
在上面的示例中,我们在el-radio上绑定了一个@click事件,并传入了$event和'电话'两个参数。在changeLabel函数中,我们可以通过value参数获取'电话'这个值。如果选择邮箱登录,value参数的值将会是'邮箱'。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![.zip](https://img-home.csdnimg.cn/images/20210720083646.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)