vue v-for遍历动态展示元素数量

Vue动态v-for渲染元素

最新推荐文章于 2024-01-18 15:29:20 发布

原创最新推荐文章于 2024-01-18 15:29:20 发布 · 5.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #v-for

Vue 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了如何在Vue中使用v-for指令根据返回结果类型动态显示不同类型的元素，如文本框、数字框、选项等。通过示例展示了如何结合属性(list)中的name、type和默认值来实现这一功能，利用JSON.stringify和JSON.parse处理数据。

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