vue-交互 -取值- 赋值

来源:互联网 发布:制作公司简介的软件 编辑:程序博客网 时间:2024/06/07 17:31

交互:
$http (ajax)

如果vue想做交互引入: vue-resouce

//一个vue文件

get:this.$http.get(url,{            a:1,            b:2        }).then(function(res){            //成功方法            alert(res.data);        },function(res){             //失败方法            alert(res.status);        });
//post:        this.$http.post('post.php',{            a:1,            b:20        },{            emulateJSON:true  //解析json格式        }).then(function(res){            //成功            alert(res.data);        },function(res){        //失败            alert(res.status);        });  

// 一个简单的get请求

    <div id="box">            <input  type="button" value="确定" @click="add()" />            <ul v-for="a in msg"> //数组赋值                <li>{{a.a}}</li>                <li>{{a.b}}</li>                <li>{{a.c}}</li>            </ul>    </div><script>    var aa = new Vue({        el: "#box",        data: {            msg: [] //一个json数组        },        methods: {            add: function() {                this.$http.get({                    url: 'home.json', //一个本地的json文件                    data: {                        //后台发送数据                    }                }).then(function(res) {                    var data = res.data.data;//取值                    for(var i in data) {                        this.msg.push({ //把值push到上面的msg里面                            a: data[i].title,                            b: data[i].tonnage,                            c: data[i].moveMode                        })                    }                })            }        }    })</script>
0 0
原创粉丝点击