Javascript 基于select选项在html vue js中添加行？

这是我的第一排。根据这里的选择选项，我需要选择不同的行

 <div class="row">
    <div class="col-md-4">
    <div class="form-group label-floating">
    <label class="control-label">Case Type</label>
    <select class="form-control" v-model="Type" id="type">
    <option value="One">One</option>
    <option value="Two">Two</option>  
    <option value="Three">Three</option>     
    </select>
    </div>
    </div>
    </div>

我不想要数字1，2，3作为值。我需要一，二，三

---

请帮助我找到解决方案

您只需在每个输入/标签上使用一个v-if即可

<div class="row">
  <div class="col-md-4">
    <div class="form-group label-floating">

     <label class="control-label" v-if="Type == 'One'">Date Released</label>
     <input type="date" class="form-control" v-if="Type == 'One'" v-model="released" required="">

     <label class="control-label" v-if="Type == 'Two'">Full Name</label>
     <input type="date" class="form-control" v-model="fullname" required=""  v-if="Type == 'Two'">

     <label class="control-label" v-if="Type == 'Three'">Address</label>
     <input type="date" class="form-control" v-model="address" required="" v-if="Type == 'Three'">
    </div>
   </div>
 </div>

然后用一个标签替换第一个代码示例中的标签

<label class="control-label">typeMapping[Type]</label>

typeMapping[Type]

先生，请检查我的问题。根据选择，我需要显示行。若我选择选项为一，我需要添加第一行，若为两行，则添加第二行，依此类推。如果您愿意，您可以将v-if置于

上，但我的答案中的代码减少了不必要的HTMLrecreate您的问题，先生，我想没有什么可重新创建的。。你可能有我的问题

 <div class="row">
 <div class="col-md-4">
 <div class="form-group label-floating">
 <label class="control-label">Address</label>
 <input type="date" class="form-control" v-model="address" required="">
 </div>
 </div>
 </div>

addForm = new Vue({
    el: "#addForm",
    data: {
        Type: '',
        released: '',
        fullname:'',
        address: '',
    },
    methods: {
        handleSubmit: function(e) {
            var vm = this;
            data['Type'] = this.Type;
            data['address'] = this.address;
            data['fullname'] = this.fullname;
            data['released'] = this.released;
            $.ajax({
                url: 'http://localhost:3000/f/',
                data: data,
                type: "POST",
                dataType: 'json',
                success: function(e) {
                    if (e.status) {
                        vm.response = e;
                        alert("success")
                    } else {
                        vm.response = e;
                        console.log(vm.response);
                        alert(" Failed") 
                    }
                }
            });
            return false;
        }, 
    },
});

<div class="row">
  <div class="col-md-4">
    <div class="form-group label-floating">

     <label class="control-label" v-if="Type == 'One'">Date Released</label>
     <input type="date" class="form-control" v-if="Type == 'One'" v-model="released" required="">

     <label class="control-label" v-if="Type == 'Two'">Full Name</label>
     <input type="date" class="form-control" v-model="fullname" required=""  v-if="Type == 'Two'">

     <label class="control-label" v-if="Type == 'Three'">Address</label>
     <input type="date" class="form-control" v-model="address" required="" v-if="Type == 'Three'">
    </div>
   </div>
 </div>

typeMapping: {
  'One': 'Date Released',
  'Two': 'Full Name'
  'Three': 'Address'
}

<label class="control-label">typeMapping[Type]</label>