使用v-model收集表单数据

最新推荐文章于 2024-08-26 08:59:48 发布
原创 最新推荐文章于 2024-08-26 08:59:48 发布 · 910 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #vue #node.js 

<!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" />
    <script src="../vue.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="root" v-on:click.prevent="submit">
        <!-- 一般不使用action传到其他页面  而是使用ajax -->
        <form>
            <!-- label 专门为input提高用户体验的 
            当点击ladel里的内容光标跳到输入框里面  
            for for="name" 跳转的输入框 id="name" 取相同的名字  这个是显示 绑定
        
        trim 清楚空格
        -->
            <label for="name">账号：</label>
            <input type="text" id="name" v-model.trim="infor.accont" />
            <br />
            <br />
            <!--   隐式绑定
            <label >账号： 
            <input type="text"></label>-->
            <label>
                    密码：
                    <input type="password" v-model="infor.pw" />
                </label>
            <br /> 年龄:
            <!-- 年龄必须事整形 type="number" v-model.number="infor.age" number同时使用-->
            <input type="number" v-model.number="infor.age">
            <input type="radio" name="sex" v-model="infor.sex" value="male" /> 女：
            <input type="radio" name="sex" v-model="infor.sex" value="female" />
            <br />
            <br /> 爱好： 学习
            <input type="checkbox" value="study" v-model="infor.hobby" /> 上网
            <input type="checkbox" value="run" v-model="infor.hobby" /> 骑行
            <input type="checkbox" value="computer" v-model="infor.hobby" />
            <br />
            <br /> 所属校区：
            <select name="" v-model="infor.city">
                    <option value="guiyang">贵阳</option>
                    <option value="beijing">北京</option>
                    <option value="chengdu">成都</option>
                    <option value="changchun">长春</option>
                    <option value="白城">白城</option>
                </select>
            <br />
            <br />
            <p>其他信息</p>
            <!-- 文本输入框只要输入信息就会实时改变 加一个lazy -->
            <textarea v-model.lazy="infor.other"></textarea>
            <br />
            <br />
            <input type="checkbox" v-model="infor.agree" /> 阅读并接受
            <button>提交</button>
            <br />
            
        </form>
    </div>

    <script>
        var vm = new Vue({
            el: '#root',
            data: {
                infor: {
                    accont: '', //账号
                    pw: '', //password
                    sex: '', //性别 单选框
                    age: 18,
                    // 多组的复选框收集必须用数组  才可以收集到数据  复选框必须要增加value属性才可以收集到数据
                    hobby: [], //爱好
                    city: "guiyang", //城市
                    other: '', //其他信息
                    agree: '' //是否同意
                }

            },
            methods: {
                submit() {
                    // console.log(this._data)
                    console.log(JSON.stringify(this.infor))
                }
            },
        });
    </script>
</body>

</html>

【Vue】v-model收集表单数据
m0_57135756的博客
06-03 393
v-model的表单数据获取方式与常用的修饰符,表单示例
v-model 收集表单数据
A_adadada的博客
11-03 215
hobby的初始值为[],此时勾选了打游戏和吃饭，那么hobby收集到的数据为study和game组成的数组。当hobby的初始值为空字符时，我收集到的hobby为 布尔类型。没有配置value，收集到的数据为布尔类型。最后收集到的数据为‘femal’
收集表单数据 v-model
mantou_riji的博客
07-18 296
v-model默认绑定value。
vuejs中使用v-model对表单数据的收集
apzlm9110的博客
03-05 214
表单收集的信息针对有text/textarea，checkbox，radio，select 举个例子： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>08_表单输入绑定</title> </h...
Vue使用v-model收集各种表单数据、过滤器
Bulut0907
08-26 1137
不是必须要用的，用计算属性、method方法也可以实现。不传时间戳，默认就是当前时间。
VUE v-model表单数据双向绑定完整示例
10-17
本文将详细介绍如何使用Vue.js中的v-model指令实现表单数据的双向绑定，并通过一个完整的示例来展示这一过程。 ### Vue v-model指令简介 v-model是Vue.js提供的一个指令，它用于在表单元素上创建双向数据绑定。...
Vue2基础 11：v-model 收集表单数据
Fxcrisp的博客
06-02 461
Vue2基础知识：v-model是如何绑定来收集表单数据
vue3_硅谷甄选_005_v-model实现父子组件数据同步
浪漫韫秋
08-25 481
父亲有个数据money（这就是响应式数据；父亲通过props将money传递给了儿子，儿子通过defineProps接收这个数据，并且渲染在页面上；儿子上面有一个按钮，点击按钮就出发了自定义事件，自定义事件将props传递的数据更新，并且传递给父亲父亲通过捕获自定义事件，接收儿子传递的更新后的数据，然后更新money。利用props和自定义事件实现父子组件数据同步；
Vue中 v-model在表单中的使用详解
qq_44544273的博客
04-15 635
在vue中,作者提供了很多方便的指令便于开发者使用,其中v-model--数据双向绑定在vue的开发中算是最为常用的一个指令.
Vue学习：收集表单数据 form-input 与v-model
weixin_47295886的博客
02-15 691
v-model收集的时checked值(勾选 不勾选 得出的时布尔值) 需要配置value属性。
v-model指令：获取和设置表单元素的值
weixin_52634719的博客
08-04 771
讲的不错
Vue表单基本操作-收集表单数据
见证自己学习,成长的记录
04-23 1743
这里有一个细节(小技巧)：表单编写input输入框的时候，通常会配合label标签使用并加上相关的css或或者js，这样会让界面更加美观，用户体验更好，但是今天主要讲的是v-model获取不同的元素数据，就不在代码里面增加复杂的代码了，大家知道就好，我在下面简单演示下加不加的区别。这个错误和单元框一致，也是没value造成的，至于为什么是布尔值，vue获取的是这一组复选框里面的checked，所以只要选中了就是true，不然就是false。首先编写表单元素，包括：文本框，单选，多选，下拉框，文本域。
表单数据收集v-model
xing942012的博客
11-24 468
表单数据收集
vue中v-model使用
weixin_44433499的博客
02-27 898
v-model用于表单数据的双向绑定，其实它就是一个语法糖，这个背后就做了两个操作：   1. v-bind绑定一个value属性   2. v-on指令给当前元素绑定input事件 自定义组件使用v-model，应该有以下操作： 接收一个value prop 触发input事件，并传入新值 在原生表单元素中： <input v-model="inputValue"> 相当于 <input v-bind:value="inputValue" v-on:input="inputValu
v-model 的使用
weixin_44234113的博客
11-12 264
v-model的基本使用 vue中使用v-model指令来实现表单元素和数据的双向绑定 <div id="app"> <input type="text" v-model="message"> {{message}} </div> <script src="../vue.js"></script> <script&gt...
v-model的使用
Silence_555的博客
03-22 686
v-model 实现双向数据绑定
29.Vue训练v_model收集表单数据
weixin_45843676的博客
02-18 229
29.Vue训练v_model收集表单数据
v-model收集数据
最新发布
03-02
### 使用 `v-model` 进行数据绑定和收集表单数据 #### 基础概念 在 Vue 中，`v-model` 是用于创建双向数据绑定的语法糖。它简化了模板内的输入控件与应用状态之间的连接过程[^2]。 #### 实现机制 通过 `Watcher` 对象来监听被绑定的数据变化，并依据 Compile 制定的更新策略自动同步视图和模型的状态，从而达到双向绑定的效果[^5]。 #### 表单项支持 `v-model` 可应用于多种类型的 HTML 输入元素，包括但不限于文本框、多行文本域、复选框、单选按钮以及选择器等[^4]。 #### 示例代码 下面是一个简单的例子展示如何利用 `v-model` 来实现基本的表单字段到组件内部 state 的映射： ```html <!-- 组件模版 --> <div id="app"> <!-- 文本框 --> <input type="text" v-model="message"> <!-- 显示消息 --> <p>Message is: {{ message }}</p> <!-- 多行文本 --> <textarea v-model="longText"></textarea> <!-- 单选按钮组 --> <div> Gender: <label><input type="radio" value="male" v-model="gender"> Male</label> <label><input type="radio" value="female" v-model="gender"> Female</label> </div> <!-- 下拉菜单 --> <select v-model="selectedOption"> <option disabled value="">请选择...</option> <option>A</option> <option>B</option> <option>C</option> </select> </div> ``` ```javascript // JavaScript 部分 new Vue({ el: '#app', data() { return { message: '', longText: '默认值...', gender: '', // 默认为空字符串表示未选中任何选项 selectedOption: '' } } }) ``` 此示例展示了不同种类的表单控件是如何借助 `v-model` 属性轻松地与其对应的 Vue 实例上的属性建立联系并实时反映其最新状态的变化情况。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值