Vuejs根据下拉列表中的选定值显示其他输入字段

Question

我有一个选择下拉列表和两个隐藏的输入字段.我想当用户在下拉列表中选择第一个项目时,会显示第一个输入字段,反之亦然.这是我的代码,但我不知道如何做一个if语句所以当选中的值等于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>

谢谢

Answer 1

你可以做点什么

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