Vue.js实现动态添加人员清单：v-model、v-bind、v-for实战教程

Vue.js实战：动态添加人员清单

本文将使用Vue.js框架实现一个简单的人员管理功能，包含以下功能点：

• 添加人员：通过表单输入人员信息，点击添加按钮将信息添加到人员列表。- 人员列表：以复选框形式展示所有人员信息，包括识别号和姓名。- 清空表单：点击清空按钮清除表单中的输入内容。

1. 创建表单

使用v-model指令双向绑定表单数据：html

2. 显示人员列表

使用v-for指令循环渲染人员信息，并使用v-model绑定复选框：html

ID: {{ user.id }}，姓名: {{ user.name }}

3. 定义方法

在methods选项中定义add()和clear()方法：javascriptmethods: { add() { if (this.id && this.name) { this.users.unshift({ id: this.id, name: this.name }); this.clear(); } }, clear() { this.id = ''; this.name = ''; }}

4. 设置样式

使用v-bind动态绑定div元素的样式：javascriptdata() { return { divStyle: { borderWidth: '1px', borderStyle: 'solid', borderColor: 'black', width: '100px', height: '100px', padding: '20px' }, // ...其他数据 }}

总结

本文通过一个简单的示例演示了如何使用Vue.js实现动态添加人员清单的功能，并讲解了v-model、v-bind和v-for指令的实际应用。