为啥条件渲染不适用于 vuejs 中的表单输入

Posted 2023-02-22

【中文标题】为啥条件渲染不适用于 vuejs 中的表单输入

【英文标题】：why is conditional rendering not working for form input in vuejs为什么条件渲染不适用于 vuejs 中的表单输入

【发布时间】：2019-05-22 22:03:18

【问题描述】：

我有一个带有选择选项的表单：

        <div>
            <select>
                <option v-model="department" :value="n" v-for="n in ['Please select', 'Medicine', 'Dental']">n</option>
            </select>
        </div>
        <div class="alignBtn">
            <label><span>&nbsp;</span><input type="submit" v-on:click.prevent="generateSlip()" value="Submit" />
            </label>
        </div>

根据上面的选择，我想显示标题内容：

               <div v-if="department === 'Medicine'">
                    <h1>Option A</h1>
                </div>
                <div v-else>
                    <h1>Option B</h1>
                </div>

但每次输出选项 B 时。

【问题讨论】：

v-if中的“部门”周围使用“”有什么特殊原因吗？

你的意思是 department 应该呈现部门的价值？

【参考方案1】：

我认为v-model 指令应该在select 元素中。你可能打算这样做..

<div>
    <select v-model="department">
        <option :value="n" v-for="n in ['Please select', 'Medicine', 'Dental']">n</option>
    </select>
</div>
<div class="alignBtn">
    <label><span>&nbsp;</span><input type="submit" v-on:click.prevent="generateSlip()" value="Submit" />
    </label>
</div>

在这种情况下，您也不需要解构。所以你可以直接在相等比较中使用department ..

<div v-if="department === 'Medicine'">
    <h1>Option A</h1>
</div>
<div v-else>
    <h1>Option B</h1>
</div>

【讨论】：

我明白了，谢谢，你能帮我解决这个问题吗：***.com/q/53902123/3311276 请

这里也不需要严格比较。