基于Vue的表单操作

最新推荐文章于 2022-11-28 12:18:32 发布

吃不胖的猫o(=^ェ^=)m

最新推荐文章于 2022-11-28 12:18:32 发布

阅读量236

点赞数 1

分类专栏： Vue 文章标签： css html vue.js

本文链接：https://blog.csdn.net/Yueqin0512/article/details/109720202

版权

Vue 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

基于Vue的表单操作

input单行文本
textarea多行文本
select下拉多选
radio单选框
checkbox多选框

示例效果如下：
在这里插入图片描述

input单行文本与 textarea多行文本类似，使用v-model数据绑定

select下拉
（1）单个下拉选项
在每个option中添加<option value="0"></option>，不同的value值，select 中添加<select v-model="occupation" >，data中添加数组，occupation:['1']，即要将相对应的value值设为默认选项
(2) 多个下拉选项
multiple设为多选，<select v-model="occupation" multiple="true">
样式高度设为自动,form div:nth-child(4){ height: auto; },dataoccupation:['1', '2']，即可实现默认选择两个

radio单选框
设置不同的value,<input type="radio" id="male" value="1" v-model="gender">,使用v-model数据绑定

checkbox多选框
设置相应的value,<input type="checkbox" id="ball" value="1" v-model="hobby">,使用v-model数据绑定,可以是单个，hobby:['2']也可以是多个hobby:['1', '2']

    <style>
        form div span{
            display: inline-block;
            width: 100px;
        }
        
        form{
            padding: 5px;
            font-size: 20px;
            width: 350px;
            border: black solid 3px;
        }

        form div{
            height: 40px;
            line-height: 40px;
        }

        form div:nth-child(4){
            height: auto;
        }
        form div span:first-child{
            display: inline-block;
            width: 100px;
        }
    </style>

<body>
    <div id="app">
        <form action="http://www.baidu.com">
            <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="female">女</label>
                </span>
            </div>
            <div>
                <span>爱好：</span>
                <input type="checkbox" id="ball" value="1" v-model="hobby">
                <label for="ball">篮球</label>
                <input type="checkbox" id="sing" value="2" v-model="hobby">
                <label for="sing">唱歌</label>
                <input type="checkbox" id="code" value="3" v-model="hobby">
                <label for="code">敲代码</label>
            </div>
            <div>
                <span>职业：</span>
                <select v-model="occupation" 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>
                <input type="submit" value="提交" @click.prevent="handle">
            </div>
        </form>
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                uname:"lisa",
                gender:1,
                hobby:['2'],
                occupation:['1'],
                desc:"werferfgvaf"
            },
            methods:{
                handle: function(){
                    console.log(this.uname);
                }
            }
        })
    </script>
</body>

表单或修饰符

number:转化为数值
trim:去掉开始和结尾的空格

    <div id="app">
        <!--v-model.number,将文本输入的字符串直接转化为数值-->
        <input type="text" v-model.number="age">
        <!--v-model.number,将文本输入的字符串去掉开始和结尾的空格-->
        <input type="text" v-model.trim="info">
        <button @click='handle'>点击</button>
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                age:'',
                info:''
            },
            methods:{
                handle:function(){
                    console.log("age:"+this.age + 13);
                    console.log("info长度:"+this.info.length );
                }
            }
        })
    </script>

在这里插入图片描述

lazy:将input事件切换为change事件（用户注册：用户名被占用时，失去焦点才进行验证）

吃不胖的猫o(=^ェ^=)m

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
基于Vue的表单操作

基于Vue的表单操作input单行文本textarea多行文本select下拉多选radio单选框checkbox多选框示例效果如下：input单行文本与 textarea多行文本类似，使用v-model数据绑定select下拉（1）单个下拉选项在每个option中添加<option value="0"></option>，不同的value值，select 中添加<select v-model="occupation" >，data中
复制链接

扫一扫

专栏目录