Vuejs 根据从下拉列表中选择的值显示其他输入字段
Vuejs display other input fields based on selected value from dropdown
我有一个 select 下拉列表和两个隐藏的输入字段。我希望当用户 select 下拉列表中的第一项时,显示第一个输入字段,反之亦然。
这是我的代码,但我不确定如何执行 if 语句,所以当 selected 值等于 xxx 时显示输入字段 1,否则显示输入字段 2
new Vue({
el: '#app',
data: {
selected: ''
}
});
<select name="parent" class="form-control" v-model="selected" required>
<option value="" selected></option>
<option value="item1">Item 1</option>
<option value="item2">Item 2</option>
</select>
<div>
<input name="Test 1" v-show="selected"> //display when item 1 is selected
</div>
<div>
<input name="Test 2" v-show="selected"> //display when item 2 is selected
</div>
谢谢
你可以这样做
<div v-if="selected === 'item1'">
item1 was selected
</div>
<div v-else>
Something else was selected.
</div>
如果您不想使用 v-else
,您可以这样做:
<div v-if="selected != 'item1'">
Something besides item1 was selected
</div>
我有一个 select 下拉列表和两个隐藏的输入字段。我希望当用户 select 下拉列表中的第一项时,显示第一个输入字段,反之亦然。 这是我的代码,但我不确定如何执行 if 语句,所以当 selected 值等于 xxx 时显示输入字段 1,否则显示输入字段 2
new Vue({
el: '#app',
data: {
selected: ''
}
});
<select name="parent" class="form-control" v-model="selected" required>
<option value="" selected></option>
<option value="item1">Item 1</option>
<option value="item2">Item 2</option>
</select>
<div>
<input name="Test 1" v-show="selected"> //display when item 1 is selected
</div>
<div>
<input name="Test 2" v-show="selected"> //display when item 2 is selected
</div>
谢谢
你可以这样做
<div v-if="selected === 'item1'">
item1 was selected
</div>
<div v-else>
Something else was selected.
</div>
如果您不想使用 v-else
,您可以这样做:
<div v-if="selected != 'item1'">
Something besides item1 was selected
</div>