vue 完成和未完成状态按钮怎么实现直接表达式输出

在Vue.js中，实现一个完成和未完成状态的切换按钮，你可以使用计算属性（Computed Properties）或模板绑定（v-bind:class）。这两种方式都可以通过简单的表达式动态地控制按钮的样式或文案。

1. 使用计算属性:

<button v-class="{ 'completed': isTaskCompleted }">
  {{ isTaskCompleted ? '已完成' : '待完成' }}
</button>

<script>
export default {
  data() {
    return {
      taskCompleted: false // 或者从服务端获取任务状态
    };
  },
  computed: {
    isTaskCompleted() {
      return this.taskCompleted;
    }
  }
};
</script>

在这个例子中，`isTaskCompleted` 是一个计算属性，当 `taskCompleted` 的值改变时，`isTaskCompleted` 的值也随之更新，进而改变按钮的类名或文案。

2. 使用模板绑定 (v-bind:class):

<button v-bind:class="{ completed: isTaskCompleted }">
  <span v-if="isTaskCompleted">已完成</span>
  <span v-else>待完成</span>
</button>

<script>
export default {
  data() {
    return {
      taskCompleted: false
    };
  },
  methods: {
    toggleTaskCompletion() {
      this.taskCompleted = !this.taskCompleted;
    }
  }
};
</script>

这里，我们绑定了 `class` 属性，`completed` 类会根据 `isTaskCompleted` 的布尔值显示对应的文案。