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>

v-for动态添加表单,并且获取表单中的值的更多相关文章

  1. select 通过表单提交获取select中的值

    <select class="txt" name="choice">       <option value="name" ...

  2. 实现表单checkbox获取已选择的值js代码

    <input type="checkbox" name="cb" value="1" />aa <input type=& ...

  3. ajax的jQuery的表单序列化获取参数serialize()

    需要引入jQuery.js才能使用$("form表单的id").serialize()可获取form表单里面所有表单元素的值和name属性值,按顺序拼接成查询字符串格式为name值 ...

  4. asp.net gridview动态添加列,并获取其数据;

    1,绑定数据前先动态添加列,见方法CreateGridColumn(只在第一次加载动态添加): 2,gvlist_RowDataBound为对应列添加控件: 前台代码: <%@ Page Lan ...

  5. js之form表单的获取

    js中获取form的方法: 1. 利用表单在文档中的索引或表单的name属性来引用表单 document.forms[i] //得到页面中的第i个表单 document.forms[formName] ...

  6. v-if案例解析(element-ui form-item 结合 v-if 动态生成rule规则\表单元素,表单无法验证问题剖析 )

    fire 读在最前面: 1.此文章衔接Vue 虚拟Dom 及 部分生命周期初探,相关整体知识点请先阅读后再继续本文阅读 问:当v-if为true时,会重新渲染相关dom节点吗? <child v ...

  7. React技巧之表单提交获取input值

    正文从这开始~ 总览 在React中,通过表单提交获得input的值: 在state变量中存储输入控件的值. 在form表单上设置onSubmit属性. 在handleSubmit函数中访问输入控件的 ...

  8. BootStrap 智能表单系列 六 表单数据绑定(编辑页面的数据绑定)

    本章介绍如何在生成表单后,将一个model的数据展示到form表单中(一般用于编辑页面) 代码如下(连接地址:https://github.com/xiexingen/Bootstrap-SmartF ...

  9. HTML 5 服务器发送事件、Input 类型、表单元素、表单属性

    HTML5 服务器发送事件(server-sent event)允许网页获得来自服务器的更新. Server-Sent 事件 - 单向消息传递 Server-Sent 事件指的是网页自动获取来自服务器 ...

  10. 遍历form表单里面的表单元素,取其value

    form.elements 获取所有表单元素 form 表单 <form action="http://localhost:1995/api/post" class=&quo ...

随机推荐

  1. PNG文件解读(1):PNG/APNG格式的前世今生

    PNG格式的前世今生 png是一种无损压缩的位图片形格式,其设计目的是试图替代GIF和TIFF文件格式,同时增加一些GIF文件格式所不具备的特性.PNG使用从LZ77派生的无损数据压缩算法--LZW专 ...

  2. 在WPF应用中使用FastReport.WPF报表模块

    FastReport是一个非常不错的报表组件,在Winform应用中常常使用它进行报表的设计.预览展现.打印或者导出文件(PDF.Excel)等,可以设计打印各种各样的报表,本篇随笔继续介绍当前最新的 ...

  3. Go--命名规则

    在Go语言中,项目名和文件名的命名规则有一些建议和惯例.以下是一些常见的规则和最佳实践: 项目名: 项目名应该简短.有意义,并能够清晰地表达项目的目的或功能. 项目名通常使用小写字母,使用连字符或下划 ...

  4. 聊一聊:MyBatis和Spring Data JPA的选择问题

    从个人开发角度来说,Spring Data JPA更好用,是因为开发起来更快. 但从团队角度,我们希望更好的维护性,spring data jpa就差一些,或者说对后期人的要求更高. 很容易出现这种情 ...

  5. 42 干货系列从零用Rust编写负载均衡及代理,wmproxy中配置tcp转websocket

    wmproxy wmproxy已用Rust实现http/https代理, socks5代理, 反向代理, 静态文件服务器,四层TCP/UDP转发,七层负载均衡,内网穿透,后续将实现websocket代 ...

  6. 核心工具之 ideavim

    对于个人的核心工具集的选择,因为编程中熟练使用主力IDE能够大大提高效率,所以IDE是一个必选项.而IDE与VIM结合的插件,对于VIM使用者,常常是一个必选项. 在Jetbrains系列工具中,插件 ...

  7. 机器学习-线性分类-支持向量机SVM-软间隔-核函数-13

    目录 1. 总结 SVM 2. 软间隔svm 4. 核函数 1. 总结 SVM SVM算法的基础是感知器模型, 感知器模型 与 逻辑回归的不同之处? 逻辑回归 sigmoid(θx) 映射到 0-1之 ...

  8. java项目实践-webapp-mytomcat-day16

    目录 1. http协议 2. 自定义的web框架 3. 具体实现 4. 启动 1. http协议 CS架构 建立连接"三次握手" 断开连接 "四次挥手" 三次 ...

  9. TOEFL | 202307 改革 · 新版题型总结

    目录 Listening(36min) Reading(35min) Speaking(16min) Writing(29min) Listening(36min) 2 conversation,3 ...

  10. 【java】设置 tomcat 账号密码

    <role rolename="manager-gui"/> <user username="tomcat" password="t ...