ajax返回值要判断 用vue是这么写吗

Question

如下jquery对ajax返回的数据的处理，用vue怎么写

<div id="app">
    <input type="text" id="a">
    <input type="text" id="b">
    <div id="c" class="c"></div>
    <div id="d"></div>
</div>
<script>
    $.ajax().done(function (data) {
        if (data.id ==1) {
            $("#a").val(data.a);
            $("#b").val(data.b);
            $("#c").removeClass('c');
            $("#d").addClass('d');
        }
    })
</script>

用vue改写上面的内容

<div id="app">
    <input type="text" id="a" v-model="msg.a">
    <input type="text" id="b" v-model="msg.b">
    <div id="c" :class="[c?'':cls]"></div>
    <div id="d" :class="[d?'':cls]"></div>
</div>
<script>
    $.ajax().done(function (data) {
        vm = new Vue({
            el: '#app',
            data: {
                mydata: data,
                c: false,
                d: true,
                cls: 'active'
            },
            computed: {
                msg: function () {
                    if (data.id == 1) {
                        this.c = true;
                        this.d = false;
                        return {
                            a: this.mydata.a,
                            b: this.mydata.b
                        }
                    }else {
                        return {
                            a: '',
                            b: ''
                        }
                    }
                }
            }
        })
    })
</script>

我觉得我这样写不对吧，好麻烦。。。

Answer 1

不会使用:class? 去好好看看官方文档吧

Answer 2

楼上+1，你这个情况还是建议通读文档吧。。。

var vm=new Vue({
        el:"#app",
        data:{
            mydata: data,
            c: false,
            d: true
        },
        created:function(){
            this.getData();
        },
        methods:{
            getData:function(){
                //你的数据请求方法及处理逻辑
                $.ajax('')
            }
        }
    })

判断页面是否显示，用v-if就可以，不懂的去看下官方文档。