1、首先在页面上添加如下的代码
var app = new Vue({
el: '#signupForm',
data: {
UserName: '',
PWD: ''
}
});
2、在下面添加html代码
<form id="signupForm" method="post" class="form-horizontal" action="">
<div class="form-group">
<label class="col-sm-4 control-label" for="firstname">用户名</label>
<div class="col-sm-5">
<input v-model="UserName" type="text" class="form-control" id="txtUserName" name="txtUserName" placeholder="用户名" />
</div>
</div> <div class="form-group">
<label class="col-sm-4 control-label" for="lastname">密码</label>
<div class="col-sm-5">
<input type="password" v-model="PWD" class="form-control" id="txtPWD" name="txtPWD" placeholder="密码" />
</div>
</div> <div class="form-group">
<div class="col-sm-9 col-sm-offset-4">
<button type="submit" class="btn btn-primary" name="signup" value="登录">登录</button>
</div>
</div>
</form>
<form id="signupForm" method="post" class="form-horizontal" action="">
固定范围
<input v-model="UserName" type="text" class="form-control" id="txtUserName" name="txtUserName" placeholder="用户名" />
<input type="password" v-model="PWD" class="form-control" id="txtPWD" name="txtPWD" placeholder="密码" />
设置影响的变量。
3、我们将数据提交到后台
$(document).ready(function () {
$.validator.setDefaults({
submitHandler: function () {
$.ajax({
type: "post",
url: '/Login/ValidUser',
data: app.$data,
success: function (data) {
if (data.suc) {
alert("登录成功！！！");
location.href = '@Url.Content("~/Admin/Home/")';
}
else {
alert(data.remark)
}
},
dataType: "JSON"
});
}
});
})
使用的是app.$data。将数据传递给后台，大功告成。
大功告成。
后来的事情，又发现一个事情：
var myData={
a:1
}；
var app=new Vue({
el:"#app",
data:myData
})；
app.a//获取值的操作
app.a=1//设置值的操作