v-for动态添加表单,并且获取表单中的值

简介: v-for动态添加表单,并且获取表单中的值

vue是数据驱动视图,所以要想改变页面的结构,就要首先改变数据。


要想动态添加一个input表单,每当你点击的时候,添加一个数据在数组里面。


handler(mess){
    this.list.push("jo")
 },


要想获得当前这个表单里面的值,我当初想的是v-model,去绑定。发现不可以。这就尴尬了。


整了一会,在百度上查找了一些资料。


还是没有对应的案例。可能是我百度的方法是不正确。


最后,还是决定使用原生的js


给表单绑定一个id。在失去焦点的时候,得到这个input框中的值。


let aa=document.getElementById("demo"+mess).value;


<template>
    <div>
     <div v-for="(item,index) in list" :key="index" class="demo">
         <input type="text" :id="`demo${index}`">
         <button @click="handler(index)" @blur="getterValue(index)">添加</button>
     </div>
    </div>
</template>
<script>
    export default {
        data(){
          return{
            list:["12"]
          }
        },
        methods:{
            handler(mess){
                this.list.push("jo")
            },
            getterValue(mess){
                let aa=document.getElementById("demo"+mess).value;
                console.log("得到的值是", aa)
            }
        }
    }
</script>
相关文章
|
JavaScript
Vue2使用全局函数或变量的两种常用方式
这篇文章介绍了在Vue 2项目中实现全局函数或变量的两种常用方式:一种是通过挂载到Vue的`prototype`,另一种是使用Vue的全局混入(Vue.mixin)。
1284 0
Vue2使用全局函数或变量的两种常用方式
|
Java
java8中List对象转另一个List对象
java8中List对象转另一个List对象
667 0
|
消息中间件 存储 数据可视化
kafka高可用集群搭建
kafka高可用集群搭建
292 0
|
存储 缓存 Java
Openresty(lua+nginx)-Guava-Redis做多级缓存
Openresty(lua+nginx)-Guava-Redis做多级缓存
248 1
|
安全 Linux 数据安全/隐私保护
国内外四款强大的远控使用体验:ToDesk、向日葵、AnyDesk、Microsoft 远程桌面横向比较
国内外四款强大的远控使用体验:ToDesk、向日葵、AnyDesk、Microsoft 远程桌面横向比较
2064 0
|
6月前
|
安全 算法 数据安全/隐私保护
远控安全进阶之战:TeamViewer/ToDesk/向日葵设备安全策略对比
在数字化时代,卓越的远程控制软件需兼顾功能与体验,包括流畅连接、高清画质、低门槛UI设计、毫秒级延迟及多功能性,同时要有独树一帜的远控安全技术,通过前瞻性安全策略阻挡网络风险,为用户打造全方位安全体验,在基础安全防护上不断创新。本文选取了当下热门的TeamViewer、ToDesk、向日葵三款远程控制软件,从软件介绍、远控安全策略等多个维度进行深入对比,以呈现一场精彩的远控软件安全进阶“大比拼”。
531 13
|
7月前
|
前端开发 JavaScript Java
Java中将图片转换为base64格式的技巧
这样,你就可以在Java中将图片转换为Base64格式了。这个方法的实现非常简单,只需要使用Java的内置库,无需任何额外的库。希望这个方法对你有所帮助。
413 22
|
9月前
|
存储 数据采集 数据库
Python爬虫实战:股票分时数据抓取与存储
Python爬虫实战:股票分时数据抓取与存储
|
10月前
|
人工智能 自然语言处理 算法
AI 对研发流程的变革
AI编程助手通过自然语言生成代码、解释复杂算法、优化代码等,极大提升了开发效率与代码质量。开发者可利用通义灵码进行代码解释、生成注释及单元测试,简化开发流程。在需求分析、设计、编码、测试到部署的全流程中,AI助手表现优异,尤其在编码和测试阶段显著提高工作效率。尽管目前AI助手在需求分析方面尚需改进,但其未来发展潜力巨大,有望逐步替代部分人力工作。体验地址:[阿里云智能编码](https://www.aliyun.com/solution/tech-solution/intelligent-coding)。
|
UED 开发者 Python
Python中使用`requests`库进行重定向与超时控制的技术详解
【4月更文挑战第12天】在Web开发中,处理HTTP重定向和请求超时是常见的需求。`requests`库作为Python中处理HTTP请求的利器,提供了丰富的功能来满足这些需求。本文将详细探讨如何在Python中使用`requests`库进行重定向处理和超时控制。