vue 在渲染的时候根据列表内容判断操作栏按钮是否禁用

在 Vue 中，我们可以通过绑定数据来动态控制按钮的禁用状态。假设我们有一个列表，其中每个项都有一个状态值 `status`，我们可以通过在按钮的 `:disabled` 属性上绑定一个计算属性来实现禁用按钮的功能，示例如下：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in list" :key="item.id">
        {{ item.name }}
        <button :disabled="isDisabled(item.status)">操作</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: "foo", status: "active" },
        { id: 2, name: "bar", status: "inactive" },
        { id: 3, name: "baz", status: "active" }
      ]
    };
  },
  methods: {
    isDisabled(status) {
      return status === "inactive";
    }
  }
};
</script>

在上述示例中，我们定义了一个计算属性 `isDisabled`，它接收一个 `status` 参数，根据该参数的值来判断按钮是否应该被禁用。在模板中，我们通过 `:disabled` 绑定这个计算属性，绑定的值为 `isDisabled(item.status)`，也就是根据列表项的状态来动态设置按钮的禁用状态。