（1）这里是input标签
（2）js的方法，如果所有框都输入了内容，就改变提交按钮的样式
（3）如果所有框都输入了内容，即提交按钮改变了，我们才允许vue使用axios向后端发送请求
/
/
/
/
源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册</title>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<meta name="format-detection" content="telephone=no"/>
<link rel="stylesheet" href="css/apple.css">
<link rel="stylesheet" href="css/index.css">
<script src="js/jquery.min.js"></script>
</head>
<body>
<div id="app">
<div class="header gradient_bg">
<div class="header_logo">
<a onclick="window.history.back()" class="header_back"> < </a>
<span>注册</span>
</div>
</div>
<!--注册-->
<div class="login_div">
<span class="login_ltext">昵称</span>
<input class="login_input" name="name" v-model="user.name" type="text" maxlength="20" placeholder="输入您的昵称"/>
</div>
<div class="login_div">
<span class="login_ltext">年龄</span>
<input class="login_input" name="age" v-model="user.age" type="text" maxlength="3" placeholder="输入您的年龄"/>
</div>
<div class="login_div">
<span class="login_ltext">手机号</span>
<input class="login_input" name="tel" v-model="user.tel" type="tel" maxlength="11" placeholder="输入手机号"/>
</div>
<div class="login_div">
<span class="login_ltext">验证码</span>
<div class="auth_div">
<input class="login_input auth_input" name="code" v-model="code" type="tel" maxlength="4" placeholder="输入验证码"/>
<div>
<img v-bind:src="url" style="width: 80px; height: 40px; margin-right: 20px" id="img-vcode" @click="getImageCode">
</div>
</div>
</div>
<div class="login_div">
<span class="login_ltext">密码</span>
<input class="login_input" type="password" name="pwd" v-model="user.pwd" maxlength="11" placeholder="设置您的登录密码"/>
</div>
<div class="login_div">
<span class="login_ltext">确认密码</span>
<input class="login_input" type="password" name="confpwd" v-model="user.confpwd" maxlength="11" placeholder="输入确认密码"/>
</div>
<div class="login_div">
<span class="login_ltext">邮箱</span>
<input class="login_input" type="text" name="email" v-model="user.email" maxlength="16" placeholder="输入您的邮箱"/>
</div>
<div class="login_div">
<span class="login_ltext">性别</span>
<input type="radio" name="sex" v-model="user.sex" value="man"/>男
<input type="radio" name="sex" v-model="user.sex" value="woman"/>女
</div>
<div class="agree_div">
<div class="agree_select cur"></div>
<span class="agree_text"> 我已同意 《<a>注册协议</a>》</span>
</div>
<div>
<span><input class="register_action" type="button" value="注册" @click="reg"></span>
</div>
<div class="register_div">
<a href="login.html" class="register_text">
已有账号，请登录
</a>
</div>
</div>
<script>
$(function () {
// 协议选项
$('.agree_select').click(function () {
if ($(this).hasClass('cur')) {
$(this).removeClass('cur');
flag = true;
} else {
$(this).addClass('cur');
flag = false;
}
registerBtnShow();
});
//获取所有的输入框
var flag = true;//是否全部输入 默认true
$(".login_input").keyup(function () {
registerBtnShow();
});
function registerBtnShow() {
$(".login_input").each(function () {
if ($(this).val() == "") {
flag = true;
return false
} else if ($('.agree_select').hasClass('cur')) {
flag = false;
}
});
if (flag) {
$(".register_action").removeClass("gradient_bg");
} else {
$(".register_action").addClass("gradient_bg");
}
}
})
</script>
</body>
</html>
<script src="./js/vue.js"></script>
<script src="./js/axios.min.js"></script>
<script>
var app = new Vue({
el: "#app",
data:{
user:{
sex: "man"
},
code: "", //验证码
url:"" //验证码的路径
},
methods:{
//注册
reg(e){
//判断是否具有class这个属性，即是否添加了gradient_bg的css样式
e = e || window.event;
let isActive = e.currentTarget.getAttribute("class").includes("gradient_bg");
// console.log("isActive----------------",isActive);
if (isActive){
var _this = this;
axios.post("http://localhost:8080/user/reg?code=" + _this.code, _this.user).then(function (result) {
if (result.data === "OK"){
alert("注册成功，请登录");
location.href = "login.html"
}
})
}
},
//获取验证码
getImageCode(){
var _this = this;
axios.get("http://localhost:8080/user/getCode").then(function (result) {
_this.url = result.data
})
}
},
created(){
this.getImageCode()
}
})
</script>