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>
相关文章
|
Java
java8中List对象转另一个List对象
java8中List对象转另一个List对象
614 0
|
JavaScript
Vue2使用全局函数或变量的两种常用方式
这篇文章介绍了在Vue 2项目中实现全局函数或变量的两种常用方式:一种是通过挂载到Vue的`prototype`,另一种是使用Vue的全局混入(Vue.mixin)。
1251 0
Vue2使用全局函数或变量的两种常用方式
|
存储 缓存 Java
Openresty(lua+nginx)-Guava-Redis做多级缓存
Openresty(lua+nginx)-Guava-Redis做多级缓存
231 1
|
消息中间件 存储 数据可视化
kafka高可用集群搭建
kafka高可用集群搭建
276 0
|
前端开发 Java 关系型数据库
基于javaweb旅游景点线路预定系统设计与实现
基于javaweb旅游景点线路预定系统设计与实现
238 0
|
6月前
|
前端开发 JavaScript Java
Java中将图片转换为base64格式的技巧
这样,你就可以在Java中将图片转换为Base64格式了。这个方法的实现非常简单,只需要使用Java的内置库,无需任何额外的库。希望这个方法对你有所帮助。
378 22
|
8月前
|
存储 数据采集 数据库
Python爬虫实战:股票分时数据抓取与存储
Python爬虫实战:股票分时数据抓取与存储
|
9月前
|
人工智能 自然语言处理 算法
AI 对研发流程的变革
AI编程助手通过自然语言生成代码、解释复杂算法、优化代码等,极大提升了开发效率与代码质量。开发者可利用通义灵码进行代码解释、生成注释及单元测试,简化开发流程。在需求分析、设计、编码、测试到部署的全流程中,AI助手表现优异,尤其在编码和测试阶段显著提高工作效率。尽管目前AI助手在需求分析方面尚需改进,但其未来发展潜力巨大,有望逐步替代部分人力工作。体验地址:[阿里云智能编码](https://www.aliyun.com/solution/tech-solution/intelligent-coding)。
|
移动开发 安全 测试技术
『App自动化测试之Appium应用篇』| 继承于selenium常用的元素定位方法有哪些?如何使用?
『App自动化测试之Appium应用篇』| 继承于selenium常用的元素定位方法有哪些?如何使用?
531 0
|
边缘计算 持续交付 数据中心
Docker在边缘计算中的崭露头角:探索容器技术如何驱动边缘计算的新浪潮
边缘计算是一项快速发展的技术,它旨在将计算能力更接近数据源和终端用户,以提供低延迟、高性能的计算体验。在这个充满活力的领域,Docker容器技术崭露头角,成为推动边缘计算革新的一股新力量。本文将深入探讨Docker在边缘计算中的应用,介绍其优势和挑战,并穿插一些示例代码,以帮助读者更好地理解这一新兴趋势。 第一部分:边缘计算和Docker容器 边缘计算的定义 边缘计算是一种计算范式,它将计算资源和数据处理能力推向网络边缘,靠近数据源和终端用户。这与传统的集中式云计算模型形成鲜明对比,后者将大部分计算任务集中在中央数据中心。边缘计算的关键目标是减少数据传输的延迟,提高响应速度,以满足对实时性要
707 0