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

vue v-for遍历动态展示元素数量相关推荐

vue利用 vue-animate-number插件动态展示数字（从0动态滚动到指定数字）
vue利用 vue-animate-number插件动态展示数字(从0动态滚动到指定数字) 第一步:安装vue-animate-number插件 $ npm install vue-animate-n ...
vue动态生成html元素,Vue.js中的动态html元素
更新: 基于 this answer,您可以在Vue 2中执行类似的动态模板组件.您实际上可以在计算部分中设置组件规范并使用 :is绑定它 var v = new Vue({ el: '#vue', ...
Vue2.x-01点击按钮弹出子Vue组件，遍历JSON展示数据
文章目录概述实现过程 Step1: 父组件设置Button按钮 Step2: 这里使用了showHandlerFlag来控制子组件是否显示,所里需要在data中定义下这个变量 Step3: 引用声 ...
vue通过传递参数动态展示图片
携带参数展示效果父组件-html <div class="page_linkbox"><div class="link_left"> ...
Vue.js入门学习--列表渲染--v-for遍历数组生成元素（四）
完整案列demo: <html><head><title>列表渲染--v-for遍历数组生成元素</title><script src=" ...
vue中给v-for渲染的元素动态添加移除类名
vue中给v-for渲染的元素动态添加移除类名今天在项目中需要做一个效果,点击对应的li改变当前的color,其他的li取消颜色,在jQuery中这很容易,由于之前已经引入了jQuery,所以直接 ...
vue给元素添加指令_Vue指令动态模糊元素
vue给元素添加指令 v模糊 (v-blur) Vue directive to blur an element dynamically. Useful to partially hide eleme ...
VUE动态展示表格字段
前言最近叼毛产品让写个需求,动态展示表格字段,要求动态根据用户习惯保存,下次进页面展示以前的,还能再次选择. 思考让用户选择展示那些字段保存db 进页面先查询db 然后根据table 字段属性过 ...
vue 在v-for列表动态添加ref，并获取对应元素
vue 在v-for列表动态添加ref,并获取对应元素 vue中的ref对于操作dom非常方便,可以直接通过给div加ref,在方法里通过this.$refs.ref的name获取 <templ ...

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

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

一、实例

vue v-for遍历动态展示元素数量相关推荐

最新文章

热门文章