Vue.js 代码示例：表单输入、人员列表及样式绑定

以下是基于 Vue.js 的代码实现：

设计表单代码如下：

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

人员列表清单显示代码如下：

<p v-for='(user, index) in users' :key='index'>
  <input type='checkbox' :value='user.id' v-model='selectedUsers'>
  ID: {{ user.id }}，姓名: {{ user.name }}
</p>

在 methods 选项中定义 add()、clear() 方法的代码如下：

methods: {
  add() {
    if (this.id && this.name) {
      this.users.unshift({ id: this.id, name: this.name });
      this.clear();
    }
  },
  clear() {
    this.id = '';
    this.name = '';
  }
}

在 data 选项中定义 divStyle 样式的代码如下：

data() {
  return {
    divStyle: {
      borderWidth: '1px',
      borderStyle: 'solid',
      borderColor: 'black',
      width: '100px',
      height: '100px',
      padding: '20px'
    }
  }
}

这是一个基于给定设定的 Vue.js 代码实现，通过 v-model 指令绑定文本框的值，并通过 v-bind 指令绑定样式属性。add() 方法用于将人员信息添加到数组的开头，并清空文本框内容。clear() 方法用于清空文本框内容。人员列表通过 v-for 指令遍历 users 数组，并以复选框形式显示。