Vue.js实现动态人员列表：表单设计、数据绑定和方法定义

使用Vue.js构建动态人员列表应用

本文将演示如何使用Vue.js创建一个简单但实用的应用程序，该应用程序包含一个用于添加人员信息的表单和一个动态更新的人员列表。

1. 表单设计

我们首先创建一个表单，用于收集用户的识别号和姓名。表单包含两个文本框和两个按钮：'添加'按钮用于将新人员信息添加到列表中，'清空'按钮用于清除表单中的内容。

<div v-bind:style='divStyle'>
  <input type='text' v-model='id' placeholder='识别号'>
  <input type='text' v-model='name' placeholder='姓名'>
  <button @click='add' :value=''添加''>添加</button>
  <button @click='clear' :value=''清空''>清空</button>
</div>

v-model指令用于实现表单数据的双向绑定，方便我们获取和操作用户输入的值。
@click指令用于绑定按钮的点击事件，分别调用add()和clear()方法。

2. 人员列表清单显示

接下来，我们使用v-for指令遍历users数组，将每个人员信息以复选框的形式动态展示在页面上。

<div>
  <p v-for='user in users' :key='user.id'>
    <input type='checkbox'>{{ user.id }} - {{ user.name }}
  </p>
</div>

v-for指令用于遍历数组，并将每个元素渲染到页面上。
:key属性用于为每个列表项指定唯一标识，提高渲染性能。

3. 数据初始化和方法定义

在Vue实例的data选项中，我们初始化users数组，并定义表单样式和初始数据。在methods选项中，我们定义add()和clear()方法，用于处理表单逻辑。

data() {
  return {
    divStyle: {
      borderWidth: '1px',
      borderStyle: 'solid',
      borderColor: 'black',
      width: '100px',
      height: '100px',
      padding: '20px'
    },
    id: '',
    name: '',
    users: [
      { id: 1, name: '张三' },
      { id: 2, name: '李四' },
      { id: 3, name: '王五' },
      { id: 4, name: '赵六' }
    ]
  }
},
methods: {
  add() {
    this.users.unshift({ id: this.id, name: this.name });
    this.clear();
  },
  clear() {
    this.id = '';
    this.name = '';
  }
}

add()方法将新人员信息添加到users数组的开头，并调用clear()方法清空表单内容。
clear()方法清空识别号和姓名文本框的内容。

4. 样式绑定

我们使用v-bind:style指令将预定义的样式对象divStyle绑定到表单容器的style属性上，实现样式的动态绑定。

总结

通过本文，我们学习了如何使用Vue.js创建包含表单和人员列表的简单应用程序。我们了解了v-model、v-for、事件处理、方法定义以及样式绑定等核心概念，这些都是构建复杂Vue.js应用程序的基础。