Question

为什么不能显示{{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/vue@2.5.16/dist/vue.js"></script> 
  </div>

</body>
</html>

Answer 1

这是您的固定脚本。作为一般建议，将来尝试阅读您的控制台，从而找出错误的根源。问题是你引用vue不是你应该的方式，其次你以错误的方式引用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/vue@2.5.16/dist/vue.js"></script>

无法处理Vue.js中的模型

1 个答案: