Vue中指令禁用元素

1.背景 

        根据某个条件来决定元素是否应该被禁用。

2.问题

        对于有些特殊权限的用户，比如一个用户信息表中，有总经理、经理、组长、员工等职位，总经理的职位高，相关操作权限用户无法进行该操作

3.示例

代码演示：

        有一个用户列表表格，每行都有一个“编辑”按钮，当用户的等级为40时，该按钮将被禁用： 

<template>
  <table>
    <tr v-for="user in users" :key="user.id">
      <td>{{ user.name }}</td>
      <td>{{ user.level }}</td>
      <td>
        <button :disabled="user.level === 40">编辑</button>
      </td>
    </tr>
  </table>
</template>

<script>
export default {
  data() {
    return {
      users: [
        { id: 1, name: '用户A', level: 30 },
        { id: 2, name: '用户B', level: 40 },
        { id: 3, name: '用户C', level: 50 }
      ]
    };
  }
};
</script>

 

4.简述

        在这个示例中，当用户B的等级为40时，对应的“编辑”按钮将被禁用。