vue遍历生成的输入框 绑定及修改值示例

对于vue遍历生成的输入框进行其值的修改与保存是vue项目开发过程中的一种常规操作。这种操作的难点在于生成数量的不确定，不能在在组件中的data直接定义。

思路

获取生成的输入框数量

初始化数组，数组的长度与待绑定输入框数量一致

将每一个输入框的v-model与数组特定项进行绑定

实现代码

1.data中定义一个存放model值的空数组

data() {
  return {
    inputData :[]
  }
}

2.将获取到的数组遍历，将获取到的值插入空数组

res.data.rows.map(v. => {
      this.inputData.push(v.desc)
    })

3.在template模板代码的输入框通过索引绑定数组的特定项

<el-input
    v-model="inputData[index]"
    placeholder="请输入内容"
    clearable
    size="small"
/>

以上这篇vue遍历生成的输入框 绑定及修改值示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue把输入框的内容添加到页面的实例讲解

    vue最最最简单的demo(记得引入) 实例化一个vue,绑定#app的元素,要渲染的数组arr作为data. 把arr的item渲染到页面,输入内容点击按钮把用户输入的内容添加到页面以及数组 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <

  • VUE.js实现动态设置输入框disabled属性

    需求背景 页面从list列表展示,跳转到新增和修改的时候,新增和修改用的是同一个页面:add-or-update.vue. 修改的时候用户的账号不能修改,因此需要将账号的输入框属性设置为"只读". 代码样例 <el-input v-model="dataForm.account" placeholder="账号" v-bind:disabled="dataForm.id!=0"></el-input>

  • vue实现页面内容禁止选中功能,仅输入框和文本域可选

    上网上翻了翻,共找到两种方式 CSS样式控制,只需将下面代码复制到 vue应用下,index.html文件中的body标签上 *{ -webkit-touch-callout:none; /*系统默认菜单被禁用*/ -webkit-user-select:none; /*webkit浏览器*/ -khtml-user-select:none; /*早期浏览器*/ -moz-user-select:none;/*火狐*/ -ms-user-select:none; /*IE10*/ user-se

  • vue实现Input输入框模糊查询方法

    本文实例为大家分享了vue实现Input输入框模糊查询方法的具体代码,供大家参考,具体内容如下 原理:原生js的indexOf() 方法,该方法将从头到尾地检索数组,看它是否含有对应的元素.开始检索的位置在数组 start 处或数组的开头(没有指定 start 参数时).如果找到一个 item,则返回 item 的第一次出现的位置.开始位置的索引为 0. 如果在数组中没找到指定元素则返回 -1. 下面先看示例: 搜索前: 搜索后: 实现方法: methods:{ // 点击搜索工程 search

  • vue限制输入框只能输入8位整数和2位小数的代码

    看到这个标题好像很简单,onblur.onchange事件都能做到,但是用户体验感貌似很差.查了下百度查不到资料了.看了下vue的基础,发现 vue 有个 watch 监听器好吧,从这里入手 用v-model 加watch 就可以很简单的实现这一个功能. ----代码省略 <input id="amt" type="number" v-model="amount"/> ----代码省略 data:{ return{ amount:&q

  • vue遍历生成的输入框 绑定及修改值示例

    对于vue遍历生成的输入框进行其值的修改与保存是vue项目开发过程中的一种常规操作.这种操作的难点在于生成数量的不确定,不能在在组件中的data直接定义. 思路 获取生成的输入框数量 初始化数组,数组的长度与待绑定输入框数量一致 将每一个输入框的v-model与数组特定项进行绑定 实现代码 1.data中定义一个存放model值的空数组 data() { return { inputData :[] } } 2.将获取到的数组遍历,将获取到的值插入空数组 res.data.rows.map(v.

  • vue路由 遍历生成复数router-link的例子

    业务场景:使用vue-cli做一个spa: 需求:顶部导航栏控制下方内容栏,实现页面内切换. 毫无疑问,vue-router很适合这样的需求,实现起来也并不复杂: 1.main.js: import VueRouter from 'vue-router' Vue.use(VueRouter); 2.定义(路由)组件: import songList from './components/songList.vue' const Bar = { template: '<div>no.2</d

  • Vue.js实现输入框绑定的实例代码

    Vue.js实现输入框绑定的实例代码

    实现效果如下: 实现代码及注释 <!DOCTYPE html> <html> <head> <title>vue.js数据动态编辑</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type=

  • 使用Vue动态生成form表单的实例代码

    具有数据收集.校验和提交功能的表单生成器,包含复选框.单选框.输入框.下拉选择框等元素以及,省市区三级联动,时间选择,日期选择,颜色选择,文件/图片上传功能,支持事件扩展. 欢迎大家star学习交流:github地址 示例 https://raw.githubusercontent.com/xaboy/form-create/dev/images/sample110.jpg 安装 npm install form-create OR git clone https://github.com/xa

  • Vue watch中监听值的变化,判断后修改值方式

    Vue watch中监听值的变化,判断后修改值方式

    目录 watch监听值的变化,判断后修改值 watch监听data函数中数据改变的三种方式 1.常用型(浅层监听) 2.深层监听(利用deep属性) 3.深层监听某一个特定属性(用字符串表示对象属性的调用) watch监听值的变化,判断后修改值 计数器有最小值与最大值的限制,且中间的文本输入框可自己输入值. 实现方式是在watch中监听文本输入框绑定的v-model,跟最大最小值比较后,如果有需要,则改变值. <mu-text-field v-model.number="weightNum

  • Vue 表单控件绑定的实现示例

    本文介绍了Vue 表单控件绑定的实现示例,感觉这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记. 基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.根据控件类型它自动选取正确的方法更新元素.尽管有点神奇,v-model 不过是语法糖,在用户输入事件中更新数据,以及特别处理一些极端例子. Text <span>Message is: {{ message }}</span> <br> <input type="text&qu

  • vue实现输入框的模糊查询的示例代码（节流函数的应用场景）

    上一篇讲到了javascript的节流函数和防抖函数,那么我们在实际场合中该如何运用呢? 首先,我们来理解一下:节流函数首先是节流,就是节约流量.内存的损耗,旨在提升性能,在高频率频发的事件中才会用到,比如:onresize,onmousemove,onscroll,oninput等事件中会用到节流函数: 输入框的模糊查询功能原理分析 所谓模糊查询就是不需要用户完整的输入或者说全部输入信息即可提供查询服务,也就是用户可以在边输入的同时边看到提示的信息(其实是查询出来匹配到的信息),百度的搜索功能

  • Vue表单控件绑定图文详解

    Vue 表单控件绑定的实现,具体可以通过以下步骤操作来实现. 1.基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.根据控件类型它自动选取正确的方法更新元素.尽管有点神奇,v-model 不过是语法糖,在用户输入事件中更新数据,以及特别处理一些极端例子. 2.Checkbox 单个勾选框,逻辑值: 3.多个勾选框,绑定到同一个数组: 4.动态选项,用 v-for 渲染: 5.值绑定 对于单选按钮,勾选框及选择框选项,v-model 绑定的值通常是静态字符串(对于勾选框是逻辑

  • 详细分析vue表单数据的绑定

    v-model的基本用法 一.本节说明 前面的章节我们学习了v-bind指定,可以通过模型数据去影响视图.我们都知道VUE是支持双向数据绑定的,那么视图是如何影响数据的呢?那就要学到我们这一节的内容v-model.v-model可以将表单输入绑定到对应的模型数据. 二. 怎么做 我们通过v-model实现一个简单的需求 通过表单input绑定模型数据message,表单数据变化data.message也发生变化 然后通过Mustache表达式,将变化之后的message数据显示到视图页面上 三.

  • vue自定义指令限制输入框输入值的步骤与完整代码

    需求 前端开发过程中,经常遇到表单校验的需求,比如校验用户输入框的内容,限制用户只能输入数字. 本文内容基于 element-ui,el-form 组件可以绑定 model.rule 用于表单内容校验,但如果有多个表单多个输入框那就得写很多个 rule,虽然方法可以通用可是使用起来也是比较繁琐的,可通过自定义执行实现一次注册,多次使用. Vue 自定义指令 我们使用 el-input 作为表单的输入框 1. 先注册一个自定义指令 import Vue from 'vue'; Vue.direct

随机推荐