Vue - 动态添加移除 DOM元素（输入框示例）
程序员文章站
2022-03-04 17:15:27
...
效果图
该示例代码简洁干净，可直接复制运行查看效果。
Vue 动态添加移除 DOM 元素，基于此示例可拓展为自身业务逻辑。
完整代码
引入
Vue采用CDN形式 ，如已经失效请自行引入。
新建 *.html 复制以下代码，浏览器运行查看效果即可。
<body>
<div id="body">
<!-- 默认框 -->
<div>
姓名: <input v-model="temp.params[0].key">
手机：<input v-model="temp.params[0].value">
<button @click="addParams()">+</button>
</div>
<!-- END -->
<!-- 动态添加框 -->
<div v-for="num in total" :key="num">
姓名: <input v-model="temp.params[num].key">
手机：<input v-model="temp.params[num].value">
<button @click="delParams(num)">-</button>
</div>
<!-- END -->
<!-- 数据动向 -->
{{ temp.params }}
<br>
{{ total }}
<!-- END -->
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
<script>
const vm = new Vue({
el: '#body',
data: {
temp: {
params: [
// 默认存在的输入框(+)
{ key:'', value:'' },
// 手动添加的输入框(-)
// ...
]
},
// 总共添加了多少个
total: 0
},
methods: {
/**
* 添加项目
* 追加数据且总数+1
* @return void
*/
addParams: function()
{
this.temp.params.push({key:'', value:''})
this.total ++
},
/**
* 移除项目
* 移除数据且总数-1
* @param {Number} num - 索引值
* @return void
*/
delParams: function(num)
{
this.temp.params.splice(num, 1)
this.total --
}
}
})
</script>