Vue如何使用get方法

时间:2017-02-16 17:08:51

标签: javascript vue.js

我想在html文件中从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 }

<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>

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

@Update: 结果是:

enter image description here

@ UPDATE2 我的html文件(通过你的代码):

for list in result:
    # now list is e.g ['cat1', 0.0]
    print(sorted(list, key=operator.itemgetter(1), reverse=True)[0])

1 个答案:

答案 0 :(得分:1)

<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>