为什么条件渲染不适用于vue.js中的表单输入

时间:2018-12-23 06:09:05

标签: html5 vue.js vuejs2 conditional-rendering

我有一个带有选择选项的表格:

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

1 个答案:

答案 0 :(得分:0)

我认为O(n^2)指令应位于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