vue表单操作

单行文本

<input type="text" v-model="uname">
<script src="../js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                uname: 'lisi'
            }
        })
    </script>

多行文本

<textarea name="" id="" v-model="desc"></textarea>
<script src="../js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                desc: '你好'
            }
        })
    </script>

单选框

    <input type="radio" value="1" v-model="gender">男
    <input type="radio" value="2" v-model="gender">女
    <script src="../js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                gender: 2
            }
        })
    </script>

复选框

<input type="checkbox" name="" id="" value="1" v-model="hobby"> 打豆豆
<input type="checkbox" name="" id="" value="2" v-model="hobby"> 唱歌
<input type="checkbox" name="" id="" value="3" v-model="hobby"> 睡觉
<script src="../js/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            hobby: [2, 3]
        }
    })
</script>

下拉菜单

　　multiple:　　可选多项

<select name="" id="" v-model="occupation" multiple="true">
    <option value="0">请选择职业...</option>
    <option value="1">教授</option>
    <option value="2">教师</option>
    <option value="3">前端工程师</option>
</select>
<script src="../js/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            occupation: [3, 2]
        }
    })
</script>