Vue框架——表单的基本操作

最新推荐文章于 2024-05-06 14:54:59 发布

程序员陈_明勇

最新推荐文章于 2024-05-06 14:54:59 发布

阅读量588

点赞数 1

分类专栏： Vue框架学习文章标签： vue vue.js vue表单表单域 vue表单的基本操作

本文链接：https://blog.csdn.net/weixin_44604586/article/details/113801225

版权

Vue框架学习专栏收录该内容

15 篇文章 0 订阅

订阅专栏

表单的基本操作

基于Vue的表单基本操作
- 案例
- 案例分析
表单域修饰符

基于Vue的表单基本操作

案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单操作</title>
    <style>
        form div {
            height: 40px;
            line-height: 40px;
            font-size: 13px;
        }
        
        form div:nth-child(5) {
            height: auto;
        }
        
        form div label {
            display: inline-block;
            width: 65px;
        }
    </style>
</head>

<body>
    <div id="app">
        <form action='https://blog.csdn.net/weixin_44604586'>
            <div>
                <label for="">姓名：</label>
                <input type="text" v-model="username">
            </div>
            <div>
                <label for="">性别：</label>
                <input type="radio" id="male" value='1' v-model="gender"><span>男</span>
                <input type="radio" id="emale" value='2' v-model="gender"><span>女</span>
            </div>
            <div>
                <label for="">爱好：</label>
                <input type="checkbox" id="basketball" value="1" v-model='hobby'><span>篮球</span>
                <input type="checkbox" id="sing" value="2" v-model='hobby'><span>唱歌</span>
                <input type="checkbox" id="code" value="3" v-model='hobby'><span>敲代码</span>
            </div>
            <!-- 单选下拉框 -->
            <div>
                <label for="">职业：</label>
                <select v-model="occupation">
                    <option value="0">请选择职业...</option>
                    <option value="1">学生</option>
                    <option value="2">程序员</option>
                    <option value="3">教师</option>
                </select>
            </div>
            <!-- 多选下拉框 -->
            <div>
                <label for="">职业：</label>
                <select v-model="occupation1" multiple='true'>
                    <option value="0">[多选]请选择职业...</option>
                    <option value="1">学生</option>
                    <option value="2">程序员</option>
                    <option value="3">教师</option>
                </select>
            </div>
            <div>
                <label for="">个人简介：</label>
                <textarea v-model="desc"></textarea>
            </div>
            <div>
                <!-- 使用prevent指令可以阻止默认提交表单行为 -->
                <input type="submit" @click.prevent="submitForm">
            </div>
        </form>
    </div>
    <script src="js/vue-2.5.16.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                username: 'cmy',
                gender: 1,
                hobby: ['1'],
                occupation: 3,
                occupation1: [1],
                desc: '你好'
            },
            methods: {
                submitForm: function() {
                    console.log(this.username);
                    console.log(this.gender);
                    console.log(this.occupation);
                    console.log(this.occupation1);
                    console.log(this.desc);
                }
            }
        });
    </script>
</body>

</html>

案例分析

input 单行文本

使用v-model进行数据的双向绑定
textarea 多行文本

使用v-model进行数据的双向绑定
select 下拉单选和多选
- 单选
  
  给select标签双向绑定一个变量occupation，然后在select标签里分别给option标签的value属性赋值。occupation的值代表着某个option被选中
- 多选
  
  给select标签双向绑定一个数组occupation1，然后在select标签里分别给option标签的value属性赋值。occupation1的值代表着哪些option被选中
radio 单选框

给标签的value属性赋值，然后使用v-model进行数据的双向绑定
checkbox 多选框

给标签的value属性赋值，然后使用v-model进行数据的双向绑定。绑定的是一个数组

表单域修饰符

number：将数据类型转化为数值

<input type="text" v-model.number="age">

tirm：去掉字符串开始和结尾的空格
```
<input type="text" v-model.trim="info">
```
lazy：将input事件转换为change(失焦)事件
```
<input type="text" v-model.lazy="msg">
```

程序员陈_明勇

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue框架——表单的基本操作

表单的基本操作基于Vue的表单基本操作案例案例分析表单域修饰符基于Vue的表单基本操作案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-w
复制链接

扫一扫