vue实现一个考勤表

要实现一个考勤表，可以考虑使用 Vue.js 框架来实现。下面是一个简单的示例：

1. 首先，需要定义一个 Vue 实例：

new Vue({
  el: '#app',
  data: {
    employees: [
      { name: '张三', status: '出勤' },
      { name: '李四', status: '出勤' },
      { name: '王五', status: '缺勤' },
      { name: '赵六', status: '出勤' }
    ]
  }
})

2. 在 HTML 中使用 v-for 指令来遍历员工列表，并使用 v-model 指令来绑定每个员工的出勤状态：

<div id="app">
  <table>
    <thead>
      <tr>
        <th>姓名</th>
        <th>出勤状态</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(employee, index) in employees">
        <td>{{ employee.name }}</td>
        <td>
          <input type="radio" v-model="employee.status" value="出勤"> 出勤
          <input type="radio" v-model="employee.status" value="缺勤"> 缺勤
        </td>
      </tr>
    </tbody>
  </table>
</div>

3. 最后，可以添加一些样式来美化考勤表：

<style>
  table {
    border-collapse: collapse;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
  }
  th, td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
  }
  input[type="radio"] {
    margin-right: 10px;
  }
</style>

这样就可以实现一个简单的考勤表了。