vue.js v-model双向数据绑定， vue.js form表单数据绑定
================================
©Copyright 蕃薯耀 2018年11月29日
http://fanshuyao.iteye.com/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue form表单</title>
</head>
<body>
<div id="vueDiv">
<form>
<div>
姓名：<input type="text" id="userName" name="userName" v-model="userName"/>
</div>
<div>
年龄：<input type="text" id="userAge" name="userAge" v-model="userAge"/>
</div>
<div>
性别：
<input type="radio" name="userSex" value="m" v-model="userSex"/>男
<input type="radio" name="userSex" value="f" v-model="userSex"/>女
</div>
<div>
兴趣：
<input type="checkbox" name="hobby" value="看电影" v-model="hobby"/>看电影
<input type="checkbox" name="hobby" value="逛街购物" v-model="hobby"/>逛街购物
<input type="checkbox" name="hobby" value="运动" v-model="hobby"/>运动
<input type="checkbox" name="hobby" value="看书" v-model="hobby"/>看书
</div>
<div>
班级：
<select name="level" v-model="level">
<option value="">请选择…</option>
<option value="1">一年级</option>
<option value="2">二年级</option>
<option value="3">三年级</option>
</select>
</div>
<div>
描述：
<textarea rows="3" cols="20" name="desc" v-model="desc"></textarea>
</div>
</form>
<input type="button" id="btnSubmit" value="提交" @click="formSubmit"/>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
var vueObj = new Vue({
el : "#vueDiv",
data : {
userName : "",
userAge : "",
userSex : "f",
hobby : ["运动","看书"],//默认勾选
level : "",
desc : ""
},
methods : {
formSubmit : function(event){
console.log("userName="+this.userName);
console.log("userAge="+this.userAge);
console.log("userSex="+this.userSex);
console.log("hobby="+this.hobby);
console.log("level="+this.level);
console.log("desc="+this.desc);
}
}
});
</script>
</body>
</html>
================================
©Copyright 蕃薯耀 2018年11月29日
http://fanshuyao.iteye.com/
121
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
