Vuejs display other input fields based on selected value from dropdown

Question

I have a select dropdown list and two hidden input fields. I would like when a user select first item in dropdown list , the first input field gets displayed and vice versa. Here is my code but I'm not sure how to do an if statement so when selected value equals xxx display input field 1, else display input field 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>

Thank you

Answer 1

You can do something like

<div v-if="selected === 'item1'">
  item1 was selected
</div>
<div v-else>
  Something else was selected.
</div>

If you don't want to use v-else you can do:

<div v-if="selected != 'item1'">
  Something besides item1 was selected
</div>