vue写一个猜字谜游戏

以下是一个简单的猜字谜游戏的Vue代码示例：

<!DOCTYPE html>
<html>
<head>
  <title>猜字谜游戏</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <h1>猜字谜游戏</h1>
    <p>{{ question }}</p>
    <input v-model="answer" type="text">
    <button @click="checkAnswer">提交答案</button>
    <p v-if="showResult">{{ result }}</p>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        question: '我是一个五个字的动物，第一个字是“猪”，最后一个字是“狗”，我是什么？',
        answer: '',
        showResult: false,
        result: ''
      },
      methods: {
        checkAnswer: function() {
          if (this.answer === '猪猫狗') {
            this.result = '恭喜你，回答正确！';
          } else {
            this.result = '回答错误，请再试一次。';
          }
          this.showResult = true;
        }
      }
    });
  </script>
</body>
</html>

这个示例中，我们使用了Vue的双向数据绑定功能，将用户输入的答案绑定到answer属性上。当用户点击“提交答案”按钮时，调用checkAnswer方法，判断用户的答案是否正确，并将结果显示在页面上