vue数据绑定

数据绑定

<input type="tel" placeholder="请输入手机号" v-on:input="verifyPhone()" v-on:blur="verifyPhone()" v-model="phone" />
<p class="labeltext">{{error_phone_msg}}</p>

Js：

data:{
    phone:"",                           //手机号
    error_phone_msg:"",                 //手机号错误提示
},
methods:{
    //验证手机号
    verifyPhone:function () {
        if (!Util.verifyPhone(this.phone)){
            vue_register.verify_phone_status = false;
            vue_register.error_phone_msg = "请输入正确的手机号";
        }else{
            $.ajax({
                url:"http://*********************************** ",
                type:"GET",
                data:{phone:vue_register.phone},
                dataType:"JSON",
                success:function (data) {
                    if (data.data){
                        vue_register.verify_phone_status = false;
                        vue_register.error_phone_msg = "该手机号已被注册";
                    }else{
                        vue_register.verify_phone_status = true;
                        vue_register.error_phone_msg = null;
                    }
                },
                error:function (data) {
                    console.log("ajax请求错误："+data)
                }
            })
        }
    }

总结：html向js传递数据用v-model

                     Js向html传递数据（1）先再data中声明

                                                          （2）html用{{messaage}}引用