Vue3?Radio單選切換展示不同內(nèi)容實現(xiàn)代碼

更新時間：2023年07月28日 15:07:24 作者：鍵指江湖

這篇文章主要介紹了Vue3?Radio單選切換展示不同內(nèi)容,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

Vue3 Radio單選框切換展示不同內(nèi)容

環(huán)境：vue3+ts+vite+element plus
技巧：v-if，v-show的使用
實現(xiàn)功能：點擊單選框展示不同的輸入框

效果實現(xiàn)前的代碼：

<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>

至此，有沒有發(fā)現(xiàn) v-if 還沒出現(xiàn)

改造

效果：進入頁面是單選框默認沒有選擇，輸入框是隱藏的，點擊單選框才展示輸入框思路：單選radio的值為0時，也就是剛進入頁面radio單選框并沒有選擇，當radio有值時，對應的輸入框顯示。

此時 v-if 出場了，只要radio的值不為0，也就是radio必須有選擇才出現(xiàn)輸入框這塊，但是radio的默認值是要改為0

<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: '',
})

進入頁面時效果：

在這里插入圖片描述