没接触过mvvm，求问用vue怎么实现的？

Question

<div id="app">
    <input type="text" id="a">
    <input type="text" id="b">
    <div id="c" class="active"></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('active');
            $("#d").addClass('active');
        }
    })</script>

jq 对ajax的数据处理，怎么用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

vue axios