vue v-for遍歷動態展示元素數量

                                         vue v-for遍歷動態展示元素數量

       最近研究了下vue，想實現一個功能，通過返回結果類型（列表）動態展示多個元素（可以是：文本框、數字框、選項等）。具體的實現如下：

一、實例

1、html

property(list) ,包含字段：[{"fildna":"1","fildtp":"1", "fildva": ""}]

fildna : name

fildtp: type

fildva： 默認值

<div>
    <div v-for="(item, i) in this.property" :key="item.fildna" style="margin-top: 20px">
      <div v-if="item.fildtp === '1'">
        <label style="width: 120px; display: inline-block">{{item.fildna}} : </label>
        <el-input v-model="item.fildva" type="text" style="width: 500px; height: 30px;"></el-input>
      </div>
      <div v-if="item.fildtp === '2'">
        <label style="width: 120px; display: inline-block">{{item.fildna}} : </label>
        <el-input v-model="item.fildva" type="text" oninput="value=value.replace(/[^\d]/g, '')" style="width: 500px; height: 30px;"></el-input>
      </div>
      <div>
           ….
      </div>
    </div>
</div>

2、js: 獲取輸入值

這裏用到了JSON.stringify: 將一個JavaScript值(對象或者數組)轉換爲一個 JSON字符串；JSON.parse()則可以將JSON字符串轉爲一個對象：

for (let i in this.property) {
  this.property[i].val = this.property[i].fildva
}
let postData = this.$qs.stringify({
  para: JSON.stringify(this.property)
})