基于 Vue 的表单操作

表单案例

成品展示

案例解析

1. 姓名和个人简介(text)
   *功能一致 都可以选用 input 或者 textarea 都比较不错，之后通过v-model 获取和设置值都比较不错

2. 性别
   *选用单选框（radio） v设置一个 v-model 和 value 来区分男和女即可

3. 爱好
   *多选框（checkbox） 需要注意的是 设置选中状态时需要使用数组的形式 例如：hobby: [‘1’, ‘2’]

4. 职业
   *一个人可以有好多个职业 也可以只有一个职业 所以可以使用单选也可以选择用多选，正因如此 我选择使用的是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>

自我激励

身后还有那么多期许的目光，怎么可以轻易放弃。