Vue 中使用 Switch Case 语句打印内容

<template>
  <div>
    <button @click="printMessage('hello')">Hello</button>
    <button @click="printMessage('world')">World</button>
    <button @click="printMessage('')">Clear</button>
    <p>{{ output }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      output: '',
    };
  },
  methods: {
    printMessage(message) {
      switch (message) {
        case 'hello':
          this.output = 'Hello, Vue!';
          break;
        case 'world':
          this.output = 'Vue is awesome!';
          break;
        default:
          this.output = '';
          break;
      }
    },
  },
};
</script>
<p>在上面的示例中，我们定义了一个名为<code>printMessage</code>的方法，该方法使用 switch case 语句根据传递的参数打印不同的消息。当用户单击“Hello”按钮时，该方法将输出“Hello, Vue!”，当用户单击“World”按钮时，该方法将输出“Vue is awesome!”，当用户单击“Clear”按钮时，该方法将清除输出。最后，我们将输出绑定到模板中的<code>&lt;p&gt;</code>元素，以便在页面上显示。</p>