vue2的radio控件,判断是否选中来实现跳转哪个页面
时间: 2023-12-03 16:45:07 浏览: 69
vue路由跳转时判断用户是否登录功能的实现
5星 · 资源好评率100%
可以通过v-model指令来绑定radio的选中状态,然后在跳转页面时判断选中状态即可。
示例代码:
```
<template>
<div>
<label>
<input type="radio" value="page1" v-model="selectedPage"> Page 1
</label>
<label>
<input type="radio" value="page2" v-model="selectedPage"> Page 2
</label>
<button @click="goToPage">Go</button>
</div>
</template>
<script>
export default {
data() {
return {
selectedPage: 'page1'
}
},
methods: {
goToPage() {
if (this.selectedPage === 'page1') {
this.$router.push('/page1')
} else if (this.selectedPage === 'page2') {
this.$router.push('/page2')
}
}
}
}
</script>
```
在上面的示例代码中,使用了v-model指令来绑定radio的选中状态,selectedPage变量保存了选中的页面值。在goToPage方法中,通过判断selectedPage的值来跳转到不同的页面。
阅读全文