vue动态绑定input,动态添加input实现方式
更新时间：2026年03月22日 10:41:26 作者：小城听风雨
这篇文章主要介绍了vue动态绑定input,动态添加input实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue动态绑定input,动态添加input
技术
vue+elemen-ui
原理
数组遍历出input，每点一下push一次。
需求
有时候需要根据其他页面传进来的数组，渲染list.length个input，还必须保证可以输入修改。
<template>
<!-- test 测试使用 -->
<div class="test">
<div v-for="(module,index) in modules" :key="index">
<el-input v-model="module.text"></el-input>
</div>
<el-button type="primary" @click="add">新增</el-button>
</div>
</template><script>
let that;
export default {
name: "test",
filters: {},
computed: {},
data() {
return {
list:["填空1","填空2","填空3"], // 模拟传过来的数组
modules:[{
text:'test'
}]
};
},
methods: {
add() {
this.modules.push({text:'test'}); // 每点一下，push一次
}
},
beforeCreate: function() {
that = this;
},
mounted() {
// 页面加载时把数据遍历后 - push到modules数组里面
for(var item of this.list) {
this.modules.push({text:item});
}
}
};
</script><style scoped>
.test {
width: 100%;
height: 100%;
position: relative;
}
.test .el-input {
width: 200px;
margin: 10px 0;
}
</style>
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
在前端开发中,数据展示一直是一个重要的部分,而表格则是数据展示最常见的形式之一,ElementUI 是饿了么前端团队推出的一款基于 Vue 的 UI 组件库,其中的 el-table 组件是一个功能强大且灵活的表格组件,今天我们要详细探讨的是 el-table 的行列合并操作2024-08-08
这篇文章主要为大家详细介绍了如何在Vue3项目中优雅地实现内嵌iframe功能,用于加载外部文档内容,感兴趣的小伙伴可以跟随小编一起学习一下2025-05-05
本文给大家分享一段详细的代码给大家介绍Vue+Vux项目实践思路,需要的朋友可以参考下2017-11-11
这篇文章主要介绍了在vue项目中使用Swiper插件详解，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
本文将详细介绍如何在Vue3项目中开发一个功能完整的音频播放组件,包括播放控制、进度条、时间显示以及多音频实例管理等功能,本文通过实例演示给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2025-08-08
这篇文章主要为大家详细介绍了Vue.js动态组件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-09-09
国际化(Internationalization,简称i18n)是现代Web应用开发中不可或缺的重要功能,本文将深入探讨Vue生态中最流行的国际化解决方案,从原理到实践,带你全面掌握Vue应用的国际化实现,需要的朋友可以参考下2026-01-01
Unity webgl嵌入到前端网页中,前端通过调用Unity webgl内方法实现需要展示的功能,前端点击Unity webgl内的交互点,Unity webgl返回给前端一些需要的数据,这篇文章主要介绍了Unity webgl 嵌入Vue实现过程,需要的朋友可以参考下2024-01-01
这篇文章主要介绍了vue组件之间通信,结合实例形式分析了vue父子组件、兄弟组件之间通信的原理、实现方法,并给出了一个类似点赞功能的总结实例,需要的朋友可以参考下2018-12-12
这篇文章主要介绍了Vue标签属性动态传参并拼接字符串的操作方法,我们需要根据传入值的类型,在placeholder属性赋值"请输入长度",“请输入宽度”,"请输入厚度"等提示字符,本文通过实例代码介绍的非常详细,需要的朋友参考下吧2023-11-11
最新评论