表单案例
成品展示
案例解析
-
姓名和个人简介(text)
*功能一致 都可以选用 input 或者 textarea 都比较不错,之后通过v-model 获取和设置值都比较不错 -
性别
*选用单选框(radio) v设置一个 v-model 和 value 来区分男和女即可 -
爱好
*多选框(checkbox) 需要注意的是 设置选中状态时需要使用数组的形式 例如:hobby: [‘1’, ‘2’] -
职业
*一个人可以有好多个职业 也可以只有一个职业 所以可以使用单选也可以选择用多选,正因如此 我选择使用的是select 标签 因为此标签既可以是多选形式也可以是单选形式
*区别就是有没有语句 multiple=“true”,如果有就是多选形式,如果没有就是单选形式
多选和单选转变时需要注意一个小细节
静态布局会发生变化 因为单选和多选所占用的大小不同 所以需要语句height: auto; 来进行自动调节。
代码
基础样式
form div {
height: 40px;
line-height: 40px;
}
form div:nth-child(4) {
height: auto;
}
form div span:first-child {
display: inline-block;
width: 100px;
}
静态布局
<div id="app">
<form>
<div>
<span>姓名:</span>
<span><input type="text" v-model="uname"></span>
</div>
<div>
<span>性别:</span>
<span>
<input type="radio" id="male" value="1" v-model="gender">
<label for="male">男</label>
<input type="radio" id="female" value="2" v-model="gender">
<label for="famale">女</label>
</span>
</div>
<div>
<span>爱好:</span>
<input type="checkbox" value="1" v-model="hobby"><label for="ball">篮球</label>
<input type="checkbox" value="2" v-model="hobby"><label for="sing">唱歌</label>
<input type="checkbox" value="3" v-model="hobby"><label for="code">写代码</label>
</div>
<div>
<span>职业:</span>
<!-- 设置为多选 mutiple -->
<select v-model="occuptaion" multiple="true">
<option value="0">请选择职业。。。</option>
<option value="1">教师</option>
<option value="2">软件工程师</option>
<option value="3">律师</option>
</select>
</div>
<div>
<span>个人简介:</span>
<textarea v-model="desc"></textarea>
</div>
<div>
<!-- prevent 阻止默认提交 -->
<input type="submit" value="提交" @click.prevent="handle">
</div>
</form>
</div>
实现提交功能以及初始化
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
/* 表单基本操作 */
var vm = new Vue({
el: '#app',
data: {
uname: 'lisi',
gender: '1',
hobby: ['1', '2'],
occuptaion: ["1", "2"],
desc: 'nihao'
},
methods: {
handle: function () {
// console.log(this.uname)
// console.log(this.gender)
/* 0: "1"
1: "2"
length: 2
__ob__: Observer {value: Array(2), dep: Dep, vmCount: 0}
__proto__: Array
可以通过toString()来直接获取 1,2
*/
// console.log(this.hobby.toString())
console.log(this.occuptaion.toString())
}
}
})
</script>
自我激励
身后还有那么多期许的目光,怎么可以轻易放弃。