快捷導(dǎo)航

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

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

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

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

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

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

<template>
    <div class="home">
        <el-row :gutter="20" style="padding: 0 100px">
            <el-form>
                <el-col :span="24">
                    <el-form-item label="選項(xiàng)：">
                        <el-radio-group v-model="state.radio" class="ml-4">
                            <el-radio label="1" size="large">型號(hào)</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="型號(hào)：">
                        <el-input v-model="state.input" placeholder="請(qǐng)輸入型號(hào)"/>
                    </el-form-item>
                    <el-form-item label="顏色：">
                        <el-input v-model="state.input2" placeholder="請(qǐng)輸入顏色"/>
                    </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.默認(rèn)選項(xiàng)型號(hào)是選中的，型號(hào)輸入框也是展示的，那么顏色輸入框是需要隱藏，定義isShow,

<el-col :span="24">
    <el-form-item label="型號(hào)：" v-show="isShow">
        <el-input v-model="state.input" placeholder="請(qǐng)輸入型號(hào)"/>
    </el-form-item>
    <el-form-item label="顏色：" v-show="!isShow">
        <el-input v-model="state.input2" placeholder="請(qǐng)輸入顏色"/>
    </el-form-item>
</el-col>
//js
const isShow = ref(true)

此時(shí)，isShow是true，! isShow就是false了，顯示如下

在這里插入圖片描述

2.獲取單選框選擇的radio值。切換的時(shí)候下面輸入框也要隨之切換。定義@change事件，如果val=1，isShow的值是true，！isShow就是false，如果不是1，那肯定是2了，因?yàn)檫@里只有2個(gè)選項(xiàng)，val=2時(shí),型號(hào)的 isShow是fasle，顏色的! isShow就是true

<el-radio-group v-model="state.radio" class="ml-4" @change="handleChange">
    <el-radio label="1" size="large" >型號(hào)</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="選項(xiàng)：">
                        <el-radio-group v-model="state.radio" class="ml-4" @change="handleChange">
                            <el-radio label="1" size="large" >型號(hào)</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="型號(hào)：" v-show="isShow">
                        <el-input v-model="state.input" placeholder="請(qǐng)輸入型號(hào)"/>
                    </el-form-item>
                    <el-form-item label="顏色：" v-show="!isShow">
                        <el-input v-model="state.input2" placeholder="請(qǐng)輸入顏色"/>
                    </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>

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

改造

效果：進(jìn)入頁(yè)面是單選框默認(rèn)沒(méi)有選擇，輸入框是隱藏的，點(diǎn)擊單選框才展示輸入框思路：?jiǎn)芜xradio的值為0時(shí)，也就是剛進(jìn)入頁(yè)面radio單選框并沒(méi)有選擇，當(dāng)radio有值時(shí)，對(duì)應(yīng)的輸入框顯示。

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

<el-col :span="24" v-if="state.radio!=0">
    <el-form-item label="型號(hào)：" v-show="isShow">
        <el-input v-model="state.input" placeholder="請(qǐng)輸入型號(hào)"/>
    </el-form-item>
    <el-form-item label="顏色：" v-show="!isShow">
        <el-input v-model="state.input2" placeholder="請(qǐng)輸入顏色"/>
    </el-form-item>
</el-col>
//js
const state = reactive({
    radio: '0',
    input: '',
    input2: '',
})

進(jìn)入頁(yè)面時(shí)效果：

在這里插入圖片描述