Vue.js根据选择框值控制元素显隐问题求助

代码核心问题 #

• Vue实例挂载目标是#app，但页面实际容器是id="method"，导致Vue无法接管DOM，{{ arrivalMethod }}和显隐逻辑全部失效。
• data中的arrivalMethod未初始化，Vue无法追踪这个响应式变量的变化。
• v-if判断里的bus、plane未加引号，被当作未定义变量，无法和arrivalMethod的字符串值匹配。
• 选项的value与对应逻辑不匹配：比如“Plane”选项value是pickup，但判断用arrivalMethod === plane，完全对应不上；“Train”选项value是fly，显示文本却写“Taking the train”，逻辑混乱。

修正后的完整代码 #

<?php
?>

<div id="method">
    <form>
        <p>Arrival Method:</p>
        <select v-model="arrivalMethod">
            <option value="bus">Bus</option>
            <option value="plane">Plane</option>
            <option value="train">Train</option>
        </select>
        <span>Selected: {{ arrivalMethod }}</span>
        <template>
            <div v-if="arrivalMethod === 'bus'">
                <p>Taking the bus</p>
            </div>
            <div v-if="arrivalMethod === 'plane'">
                <p>Taking the plane</p>
            </div>
            <div v-if="arrivalMethod === 'train'">
                <p>Taking the train</p>
            </div>
        </template>
    </form>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<script>
    const app = Vue.createApp({
        data() {
            return {
                arrivalMethod: '' // 初始化响应式变量
            }
        }
    })
    app.mount('#method') // 挂载到实际容器id
</script>

关键修改说明 #

1. 将Vue挂载目标改为#method，和页面容器id对应，让Vue能正确接管该区域DOM。
2. 给arrivalMethod设置初始值''，确保Vue能创建响应式变量并追踪变化。
3. v-if条件里的字符串值加上单引号，比如'bus'、'plane'，让判断逻辑能正确匹配arrivalMethod的字符串值。
4. 统一选项的value、文本与逻辑：把Plane选项value改为plane，Train选项value改为train，同步调整显隐div的文本和判断条件，让逻辑一致。

内容的提问来源于stack exchange，提问作者Adam5532