为什么不能显示{{myGame}},结果最初应该是超级马力欧,并且在用户按下按钮时会更改它,但是没有显示,只是显示{{myGame}}。我不知道如何解决它,谢谢!



let myApp = new vue({

  el:'myApp',
  data:{
     myGame:'超級馬力歐'
  },

  methods:{

    btnClick: function(pname){
      this.myGame = pname;
    },
  },

});

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">

  <title>JS Bin</title>
</head>
<body>

  <div id="myApp" >
    <p> 您最喜歡的遊戲是:{{myGame}}</p>

    <button v-on:click="btnClick('我的世界')">我的世界</button>
    <button v-on:click="btnClick('我的世界33')">我的世界33</button>
    <button v-on:click="btnClick('我的世界44')">我的世界44</button>
    <button @click="btnClick('我的世11界')">我的世11界</button>

   <script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
  </div>

</body>
</html>

最佳答案

这是适合您的固定脚本。作为一般建议,将来尝试阅读控制台,从而找出错误的根源。问题在于您引用的不是您应有的方式,其次您以错误的方式引用了app元素



let myApp = new Vue({

  el:'#myApp',
  data:{
     myGame:'超級馬力歐'
  },

  methods:{

    btnClick: function(pname){
      this.myGame = pname;
    },
  },

});


  <div id="myApp" >
    <p> 您最喜歡的遊戲是:{{myGame}}</p>

    <button v-on:click="btnClick('我的世界')">我的世界</button>
    <button v-on:click="btnClick('我的世界33')">我的世界33</button>
    <button v-on:click="btnClick('我的世界44')">我的世界44</button>
    <button @click="btnClick('我的世11界')">我的世11界</button>

  </div>

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>

09-25 20:49