1. 表单例子
1.1. 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>表单</title>
<style type="text/css">
form div {
height: 40px;
line-height: 40px;
}
form div:nth-child(4) {
height: 100px;
}
form div span:first-child {
display: inline-block;
width: 80px;
}
</style>
</head>
<body>
<div id="app">
<form action="">
<div><span>姓名: </span>
<span><input type="text" v-model="userName" /></span>
</div>
<div><span>性别: </span>
<span>
<input type="radio" v-model="gender" value="1" /><label>男</label>
<input type="radio" v-model="gender" value="2" /><label>女</label>
</span>
</div>
<div><span>爱好: </span>
<span>
<input type="checkbox" v-model="hobby" value="1" /><label>篮球</label>
<input type="checkbox" v-model="hobby" value="2" /><label>唱歌</label>
<input type="checkbox" v-model="hobby" value="3" /><label>跳舞</label>
</span>
</div>
<div><span>职业: </span>
<span>
<select v-model="occupation" multiple="multiple">
<option value="0">请选择职业...</option>
<option value="1">老师</option>
<option value="2">工程师</option>
<option value="3">律师</option>
</select>
</span>
</div>
<div><span>个人简介: </span>
<span><textarea v-model="desc"></textarea></span>
</div>
<div><input type="submit" value="提交" @click.prevent="handle" /></div>
</form>
</div>
<script type="text/javascript" src="vue.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
userName: "张三",
gender: 2,
hobby: [1, 3],
occupation: [2, 3],
desc: "我是有钱人......"
},
methods: {
handle: function(event){
console.log("userName=" + this.userName + ", gender=" + this.gender + ", hobby=" + this.hobby + ", occupation=" + this.occupation + ", desc=" + this.desc);
}
}
});
</script>
</body>
</html>1.2. 效果图
2. 表单域修饰符
2.1. .number转化为数字(可以转为数字的值转换成功)。
2.2. .trim剔除掉开头和结尾的空格。
2.3. .lazy将input事件切换为change事件(失去焦点的时候触发)。
2.4. 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>表单域修饰符</title>
</head>
<body>
<div id="app">
<!-- .number转换为数字 -->
<input type="text" v-model.number="num1" />
<input type="text" v-model.number="num2" />
{{num1 + num2}}<br /><br />
<!-- .trim剔除掉开头和结尾的空格 -->
<input type="text" v-model.trim="info" />
<!-- .lazy将input事件切换为change事件(失去焦点的时候触发) -->
<input type="text" v-model.lazy="msg" /> {{msg}}
<button @click="handle">点击</button>
</div>
<script type="text/javascript" src="vue.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
num1: "",
num2: "",
info: "",
msg: ""
},
methods: {
handle: function(){
console.log("info = " + this.info)
}
}
});
</script>
</body>
</html>2.5. 效果图
