精华内容
下载资源
问答
  • vue 动态添加input输入框

    千次阅读 2019-10-30 09:31:41
    vue 动态添加input输入框 实现需求:请求到后台数据是String以","隔开的,要求要以input框的方式来增删改,最后以String的数据格式提交给后台 data() { return { str: "aaaa,bbbbb,ccccc", mylist: [] }; }, ...

    vue 动态添加input输入框

    实现需求:请求到后台数据是String以","隔开的,要求要以input框的方式来增删改,最后以String的数据格式提交给后台
    在这里插入图片描述

    data() {
        return {
          str: "aaaa,bbbbb,ccccc",
          mylist: []
        };
      },
    
      mounted() {
        this.mylist = this.str.split(",").map(function(item) {
          return {
            val: item
          };
        });
      },
    

    因为input的v-model不能为item,所以给他的值加上一个属性名
    .map():对数组的每个元素都遍历一次,同时返回一个新的值

    add() {
          this.mylist.push({ val: "" });
        },
     remove(myindex) {
          this.mylist = this.mylist.filter(
            (currentValue, index) => index != myindex
          );
        }
    

    添加和删除数组
    filter() - 用于把Array的某些元素过滤掉,然后返回剩下的元素。filter()接收一个函数把传入的函数依次作用于每个元素,然后根据返回值是true还是false决定保留还是丢弃该元素.
    语法:array.filter(function(currentValue,index,arr), thisValue)

    参数解释:

    currentValue:必须。当前元素的值

    index:可选。当前元素的索引值

    arr:可选。当前元素属于的数组对象

    filter()的本质就是筛选,留下符合条件的,过滤掉不符合条件的,判断条件是点击的index不等于数组里面的index,若等于就过滤掉这个项

    save() {
          var result = this.mylist.map(item => item.val);
          result = result
            .filter(function(item) {
              return item;
            })
            .join(",");
        },
    

    这里的filter()的目的是剔除为空的数组,然后再转字符串

    展开全文
  • vue 通过按钮动态添加输入框

    万次阅读 2019-05-14 08:14:15
    效果图如下 思路: 1、有一个数组counter,是空的 2、在页面上循环遍历这个数组(当然页面上显示的肯定是什么都没有) 3、点击按钮,就会添加元素进去 ...

    效果图如下

     思路:

    1、有一个数组counter,是空的

    2、在页面上循环遍历这个数组(当然页面上显示的肯定是什么都没有)

    3、点击按钮,就会添加元素进去

     

    展开全文
  • vue.js 实现输入框动态添加

    万次阅读 2018-06-24 10:34:04
    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="...vue-dem

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width,initial-scale=1.0">

    <title>vue-demo</title>

    </head>

    <body>

    <div id="app">

    <p> {{title}}</p>

    <p v-if='showSub'> {{subTitle}}</p>

    <div>

    <input type="text" v-model="mytodo">

    <button @click='handleClick'>添加,修改</button>

    </div>

    <ul>

    <li v-for='todo in todos'>{{todo}}</li>

    </ul>

    </div>

    <!-- built files will be auto injected -->

    </body>

    </html>

     

    上面是index.html

    用 v-model 指令在表单控件元素上创建双向数据绑定,v-model 会根据控件类型自动选取正确的方法来更新元素。

    简单地说:当在输入框输入“你好”时,在main.js 文件里面的mytodo的值就变成了:’你好‘。

    当我点击添加修改按钮的时候,通过事件绑定,执行main.js 文件里面的 handleClick ()方法,

    通过: this.todos.push(this.mytodo);

    todos:[

    '吃饭',

    '睡觉',

    '写代码'

    ]

    添加“你好”。

    通过

     

    <ul>

    <li v-for='todo in todos'>{{todo}}</li>

    </ul>

    渲染出来。

    然后又通过this.mytodo = '';

    使得输入框变为空。

    下面看main.js

     

    new Vue({

    el:"#app",

    data:{

    title:'hello vuejs',

    subTitle:'Vue React Angular is good',

    showSub:true,

    mytodo:'',

    todos:[

    '吃饭',

    '睡觉',

    '写代码'

    ]

    },

    methods:{

    handleClick(){

    // push() 添加方法

    this.todos.push(this.mytodo);

    this.mytodo = '';

    this.title = '您好,小程序';

    }

    }

    }

    )

     

    运行截图:

     

    微信公众号:

    展开全文
  • vue实现搜索显示历史搜索记录,采用插件-good-storage 安装插件  npm install good-storage -S 在本地新建cache.js文件,该文件是关于本地存储的逻辑处理(缓存到本地的数据最大缓存15条,并且新的插入在第一位,首先...
  • 首首先呢,有时候会有这样的需求,新增的时候可以输入,但是无法修改,此时就需要通过控制input标签的disabled属性来实现,那vue是如何动态设置input输入框的disabled属性的呢? 使用这个属性 v-bind:disabled=...

    首首先呢,有时候会有这样的需求,新增的时候可以输入,修改的时候就就把输入框禁用,此时就需要通过控制input标签的disabled属性来实现,那vue是如何动态设置input输入框的disabled属性的呢?

    使用这个属性 v-bind:disabled="disabled"

    <el-input v-model="tableForm.key" autocomplete="off" v-bind:disabled="disabled"></el-input>
    

    在下面绑定
    在这里插入图片描述

    然后我们在点击增加按钮的时候
    在增加的方法内
    把它改为this.disabled=false;
    在这里插入图片描述
    在点击修改按钮的时候
    在修改的方法内
    在把它改为this.disabled=true;
    在这里插入图片描述

    展开全文
  • 有时候会有这样的需求,新增的时候可以输入,修改的时候就把输入框禁用,此时就需要通过控制input标签的disabled属性来实现,那vue是如何动态设置input输入框的disabled属性的呢? <el-input v-model="tableForm.key...
  • 原生JS操作DOM使用mounted钩子函数,它表示页面一加载进来就执行函数里面的内容(和window.onload类似)1//html部分 编号:<...//vue对象var vm = new Vue({ el: '#app', data: { newId: '', ...
  • 页面从list列表展示,跳转到新增和修改的时候,新增和修改用的是同一个页面:add-or-update.vue。 修改的时候用户的账号不能修改,因此需要将账号的输入框属性设置为”只读”。 代码样例 账号 v-bind:disabled=...
  • vue动态增加,删除表单输入框

    千次阅读 2019-10-23 15:56:18
    '../../components/Bread.vue' export default { name : 'distribution-set' , components : { Bread // 注册面包屑组件 } , data ( ) { return { dataPath : [ { name : ...
  • vue elementui点击按钮新增输入框

    千次阅读 2021-04-16 16:18:51
    点击加号+、按钮新增输入框input elementui 效果展示: 看看给你几个核心关键词能否启发你实现:v-for array push splice 有启发吗? 核心思路 //我将我的代码简化到最简,和工程相关的已经删除,启发思路即可 <...
  • vue前端框架 smartInput联想输入框组件,自己亲自封装的,还是挺好用的,下载下来将文件名改成index.vue,然后在框架的/src/components目录下新建文件夹SmartInput,将index.vue放在SmartInput目录下面,然后在页面...
  • vue+elment Ui 动态创建输入框

    千次阅读 2019-08-06 15:47:12
    新增属性 export default { data() { return { visible: false dataForm: { domains: [{ key: '属性a', value: 'aaa' }, { key: '属性b', value: 'bbb' }] }, imgList: [] } }, methods: ...
  • 要展示后端接收的卡号列表并可以做卡号内容修改,同时完成输入框动态增加与删减实现卡号的增删。 对动态生成的输入框要进行动态输入校验。 二、使用步骤 1.表单部分(el-form、el-input) 代码如下(示例)...
  • vue循环添加输入框

    千次阅读 2019-12-27 09:31:54
    循环添加效果如上图。 上代码 <el-form-item label="大区:" prop="formInline.gameArea" class="area">...el-input v-model="formInline.name" placeholder="请输入大区名称" style="width: 260px;...
  • 最近项目上提出一个经常遇到的需求,点击新增时input可输入,点击编辑时input置灰。写下过程,希望能帮助到大家。 1.首先在input上添加disabled属性 2.data中定义isDisabled值为false(可编辑) 3.在...
  • 效果图: 基础数据为一个数组,点击添加后判断之前数据中是否有空,有空不可以添加,没空值则向数组中添加一个新得对象: ...<div class="rechargeSetCont"> <div v-for="(item,index) in addParamList" :...
  • 1.动态表单部分 2.data部分 3.方法 <el-form ref="form" :rules="formRules" :inline="true" :model="form" label-width="80px"> <div v-for="(item, index) in form.dynamicItem" :key="index">
  • VUE.js动态设置输入框disabled属性

    万次阅读 2018-11-12 15:47:07
    页面从list列表展示,跳转到新增和修改的时候,新增和修改用的是同一个页面:add-or-update.vue。 修改的时候用户的账号不能修改,因此需要将账号的输入框属性设置为"只读"。 代码样例 &lt;el-...
  • 1、记录实际工作中所需要动态添加的表格或其他内容,先上实现图片。 2、我会对所写代码进行详细解答。 3、template 模板 <template> <div> <div class="itemsg"> <button class=...
  • 一、开发时候遇到动态添加筛选件(输入框、下拉框)问题,需要做成的效果如下 二、代码实现 (1)template部分 <el-collapse-item title="查询条件" name="1"> <el-form :model="dynamicValidateForm" ...
  • 主要介绍了js简单实现表单中点击按钮动态增加输入框数量的方法,涉及javascript鼠标点击事件及insertAdjacentHTML方法的相关使用技巧,需要的朋友可以参考下
  • 有时候会有这样的需求,新增的时候可以输入,但是无法修改,此时就需要通过控制input标签的disabled属性来实现,那vue是如何动态设置input输入框的disabled属性的呢? 输入框的html源代码 配置项 v-bind:disabled=...
  • 动态生成v-model时不能直接使用string[‘name’]=value,无法编辑,这时需要使用this.$set
  • table表格中vue前端input输入框输入任意一行后面的输入框跟着一起改变是什么原因
  • 主要介绍了element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 原因:Vue无法检测普通的新增属性 解决:通过this.$set()新增 <el-form :model="form" :inline="true"> <el-form-item v-for="item of data" :label="`${item.desc}:`" :key="item.value"&
  • 开发过程中遇到了一个需求,根据用户选择的联系方式,动态改变输入框的检验条件,并且整个表单是可以增加的 在线访问:动态表单校验 github(欢迎star): https://github.com/Mrblackant. .. 思考几个问题 1.整个表单...
  • 这里涉及到动态input表单校验 我仅给自己记录一下 <!-- 动态添加行 --> <a-form-model-item :wrapper-col="newWrapper" style="padding-left:63px;padding-right:40px;" v-for="(item, index) in form....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,280
精华内容 1,312
关键字:

vue动态新增输入框

vue 订阅