Vue如何使用get方法

我想从Vue的HTML文件中发送get方法。我的代码如下：Vue如何使用get方法

<html> 
    <head> 
    <script src="https://unpkg.com/vue/dist/vue.js"></script> 
    </head> 
    <body> 
     <div id="myDiv"> 
      <p>{{something}}</p> 
     </div> 
    </body> 
    <script> 
     new Vue({ 
      el: '#myDiv', 
      data: function(){ 
       return{ 
        something: '' 
       } 
      }, 
      ready: function(){ 
       this.getValue(); 
      }, 
      methods: { 
       getValue: function(){ 
        var value = value; 
        this.$http.get('https://jsonplaceholder.typicode.com/posts/1') 
         .success(function(value){ 
          this.$set('value',value); 
         }) 
         .error(function(err){ 
          value.log(err); 
         }); 
       } 
      } 
     }); 
    </script> 
</html>

怎么可能把响应在something在div与id="myDiv"就像串？（例如json：

{ 
    "name":"Jon", 
    "age":1 
}

有控制台没有错误，但我的屏幕是完全空白

@Update：结果是：

@ UPDATE2 我的HTML文件（通过您的代码）：

<html> 
    <head> 
    <script src="https://unpkg.com/vue/dist/vue.js"></script> 
    </head> 
    <body> 
     <div id="myDiv"> 
      <div v-if="response.userId"> 
      {{ response.userId }} 
      {{ response.id }} 
      {{ response.title }} 
      {{ response.body }} 
      </div> 
      <div v-if="response.error"> 
      <p>Request failed</p> 
      </div> 
    </div> 
    </body> 
    <script> 
     var vm = new Vue({ 
      el: '#myDiv', 
      data: { 
       response: {} 
      }, 
      created() { 
      this 
      .$http 
      .get('https://jsonplaceholder.typicode.com/posts/1') 
      .then(function(response) { 
      console.log(response) 
      this.$set('response', response.data) 
      }) 
      } 
     }); 
    </script> 
</html>

来源

2017-02-16 littlewombat

<html> 
    <head> 
    <script src="https://unpkg.com/vue/dist/vue.js"></script> 
    <script src="https://cdn.jsdelivr.net/vue.resource/1.2.0/vue-resource.min.js"></script> 
    </head> 
    <body> 
     <div id="myDiv"> 
      <div v-if="response.userId"> 
      {{ response.userId }} 
      {{ response.id }} 
      {{ response.title }} 
      {{ response.body }} 
      </div> 
      <div v-if="response.error"> 
      <p>Request failed</p> 
      </div> 
    </div> 
    </body> 
    <script> 
     var vm = new Vue({ 
      el: '#myDiv', 
      data: { 
      response: {} 
      }, 
      created() { 
      this 
      .$http 
      .get('https://jsonplaceholder.typicode.com/posts/1') 
      .then(function(response) { 
      console.log(response) 
      this.response = response.data 
      }) 
      } 
     }); 
    </script> 
</html>

来源

2017-02-16 17:19:15

我用你的代码，但结果是：'{{response.message}} {{response.status}} {{response.error}}' – littlewombat

更新了答案@littlewombat –

我把结果放在我的文章中 – littlewombat

Vue如何使用get方法

回答

相关问题