Vue3 Radio单选框切换展示不同内容
环境:vue3+ts+vite+element plus
技巧:v-if,v-show的使用
实现功能:点击单选框展示不同的输入框
效果实现前的代码:
<template>
<div class="home">
<el-row :gutter="20" style="padding: 0 100px">
<el-form>
<el-col :span="24">
<el-form-item label="选项:">
<el-radio-group v-model="state.radio" class="ml-4">
<el-radio label="1" size="large">型号</el-radio>
<el-radio label="2" size="large">颜色</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="型号:">
<el-input v-model="state.input" placeholder="请输入型号"/>
</el-form-item>
<el-form-item label="颜色:">
<el-input v-model="state.input2" placeholder="请输入颜色"/>
</el-form-item>
</el-col>
</el-form>
</el-row>
</div>
</template>
<script setup lang="ts">
import {reactive, ref} from "vue";
const isShow = ref(true)
const state = reactive({
radio: '1',
input: '',
input2: '',
})
</script>
<style lang="scss" scoped>
.home {
background: antiquewhite;
height: 200px;
}
</style>
1.默认选项型号是选中的,型号输入框也是展示的,那么颜色输入框是需要隐藏,
定义isShow,
<el-col :span="24">
<el-form-item label="型号:" v-show="isShow">
<el-input v-model="state.input" placeholder="请输入型号"/>
</el-form-item>
<el-form-item label="颜色:" v-show="!isShow">
<el-input v-model="state.input2" placeholder="请输入颜色"/>
</el-form-item>
</el-col>
//js
const isShow = ref(true)
此时,isShow是true,! isShow就是false了,显示如下
2.获取单选框选择的radio值。切换的时候下面输入框也要随之切换。
定义@change事件,如果val=1,isShow的值是true,!isShow就是false,如果不是1,那肯定是2了,因为这里只有2个选项,val=2时,型号的 isShow是fasle,颜色的! isShow就是true
<el-radio-group v-model="state.radio" class="ml-4" @change="handleChange">
<el-radio label="1" size="large" >型号</el-radio>
<el-radio label="2" size="large" >颜色</el-radio>
</el-radio-group>
//js
const handleChange = (val: any) => {
if (val == 1) {
isShow.value = true
} else {
isShow.value = false
}
}
完整代码如下
<template>
<div class="home">
<el-row :gutter="20" style="padding: 0 100px">
<el-form>
<el-col :span="24">
<el-form-item label="选项:">
<el-radio-group v-model="state.radio" class="ml-4" @change="handleChange">
<el-radio label="1" size="large" >型号</el-radio>
<el-radio label="2" size="large" >颜色</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="型号:" v-show="isShow">
<el-input v-model="state.input" placeholder="请输入型号"/>
</el-form-item>
<el-form-item label="颜色:" v-show="!isShow">
<el-input v-model="state.input2" placeholder="请输入颜色"/>
</el-form-item>
</el-col>
</el-form>
</el-row>
</div>
</template>
<script setup lang="ts">
import {reactive, ref} from "vue";
const isShow = ref(true)
const state = reactive({
radio: '1',
input: '',
input2: '',
})
const handleChange = (val: any) => {
if (val == 1) {
isShow.value = true
} else {
isShow.value = false
}
}
</script>
<style lang="scss" scoped>
.home {
background: antiquewhite;
height: 200px;
}
</style>
至此,有没有发现 v-if 还没出现
改造
效果:进入页面是单选框默认没有选择,输入框是隐藏的,点击单选框才展示输入框
思路:单选radio的值为0时,也就是刚进入页面radio单选框并没有选择,当radio有值时,对应的输入框显示。
此时 v-if 出场了,只要radio的值不为0,也就是radio必须有选择才出现输入框这块,但是radio的默认值是要改为0文章来源:https://www.toymoban.com/news/detail-611836.html
<el-col :span="24" v-if="state.radio!=0">
<el-form-item label="型号:" v-show="isShow">
<el-input v-model="state.input" placeholder="请输入型号"/>
</el-form-item>
<el-form-item label="颜色:" v-show="!isShow">
<el-input v-model="state.input2" placeholder="请输入颜色"/>
</el-form-item>
</el-col>
//js
const state = reactive({
radio: '0',
input: '',
input2: '',
})
进入页面时效果:
选择时:
文章来源地址https://www.toymoban.com/news/detail-611836.html
到了这里,关于Vue3 Radio单选切换展示不同内容的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!