vue基础核心（五）收集表单数据：输入框&单选框&复选框&密码框&下拉框&文本框（文章中所有代码均可运行，有问题可留言）

最新推荐文章于 2023-04-23 16:58:33 发布

桃桃tao

最新推荐文章于 2023-04-23 16:58:33 发布

阅读量685

点赞数

分类专栏： vue（已完结）文章标签： vue.js elementui javascript vue

本文链接：https://blog.csdn.net/weixin_47687315/article/details/123331682

版权

vue（已完结）专栏收录该内容

16 篇文章 2 订阅

订阅专栏

<body>
    <div id="root">
        <!-- 输入框：v-model和vue进行绑定，输入的内容就是value -->
        <!-- trim修饰符：不收集前后空格，但中间空格无法识别 -->
        账号：<input type="text" name="id" v-model.trim="id"></input><br>
        <!-- 密码框：v-model和vue进行绑定，输入的内容就是value -->
        密码：<input type="password" name="password" v-model="password"><br>
        <!-- 单选框：v-model和vue进行绑定，value是选择的内容 -->
        <!-- 单选框的选项有相同的name -->
        性别：<input type="radio" name="sex" v-model="sex" value="男">男
        <input type="radio" name="sex" v-model="sex" value="女">女<br>
        <!-- 数字框 -->
        <!-- number修饰符：只收集数字 -->
        年龄：<input type="number" v-model.number="age"><br>
        <!-- 复选框：v-model和vue进行绑定，绑定一个数组，value是选择的内容 -->
        爱好：<input type="checkbox" name="hobby" v-model="hobby" value="抽烟">抽烟
        <input type="checkbox" name="hobby" v-model="hobby" value="喝酒">喝酒
        <input type="checkbox" name="hobby" v-model="hobby" value="烫头">烫头<br>
        <!-- 下拉框：v-model在select标签中，和vue进行绑定 -->
        所属校区：
        <select name="address" v-model="address">
            <option selected hidden disabled value="">请选择校区</option>
            <option  value="哈尔滨">哈尔滨</option>
            <option  value="大连">大连</option>
            <option  value="北京">北京</option>
        </select><br>
        <!-- 文本框：v-model和vue进行绑定，输入的内容就是value -->
        <!-- lazy修饰符:失去焦点收集，不是实时收集 -->
        其他信息：<textarea name="message" rows="5" cols="30" v-model.lazy="message"></textarea><br>
        <!-- 复选框 -->
        <input type="checkbox" name="agreement" v-model="agreement" value="同意">阅读并接受<a href="http://www.baidu.com/" target="_self">《用户协议》</a>
        <button v-on:click="submit">提交</button>
    </div>
    <script>
        new Vue({
            el:"#root",
            data() {
                return {
                    id:"",
                    password:"",
                    sex:"",
                    age:"",
                    hobby:[],
                    address:"",
                    message:"",
                    agreement:""
                }
            },
            methods:{
                submit(){
                    alert("提交成功")
                    console.log(JSON.stringify(this._data))//JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串。
                }
            }
        })
    </script>
</body>

桃桃tao

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue基础核心（五）收集表单数据：输入框&单选框&复选框&密码框&下拉框&文本框（文章中所有代码均可运行，有问题可留言）

<body> <div id="root">   账号：<input type="text" name="id" v-model.trim="id"></input><br> <!-- 密码框：v-.
复制链接

扫一扫