vue 完成和未完成状态按钮直接在Button属性里面直接用表达式表达出来在里面判断

在Vue.js中，如果你想在单个按钮上实现完成（已选中）和未完成（未选中）状态的切换，并通过属性控制这种显示，你可以使用v-bind或对象绑定（`.sync` 或 `v-model`) 来动态地绑定按钮的状态。假设你有一个布尔值变量 `completed` 存储任务的状态，你可以这样做：

<button v-bind:class="{ completed: task.completed }" @click="toggleTaskCompletion(task)">
  {{ task.completed ? '已完成' : '未完成' }}
</button>

<script>
export default {
  data() {
    return {
      task: { id: 1, name: '任务', completed: false },
    };
  },
  methods: {
    toggleTaskCompletion(task) {
      task.completed = !task.completed; // 切换任务完成状态
    },
  },
};
</script>

<style>
.completed {
  background-color: #success; /* 根据需要设置已选中的样式 */
}

.uncompleted {
  background-color: #primary; /* 根据需要设置未选中的样式 */
}
</style>

在这个例子中，按钮的 `class` 属性根据 `task.completed` 的值来应用对应的 CSS 类。当点击按钮时，`toggleTaskCompletion` 方法会被触发，改变 `task.completed` 的值，进而更新按钮的显示。