vue中使用v-model绑定表单操作

最新推荐文章于 2022-11-16 15:52:28 发布
最新推荐文章于 2022-11-16 15:52:28 发布
阅读量479 收藏 1
点赞数 1
分类专栏： vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chengxue_123/article/details/109312881
版权

通过v-model双向绑定表单案例

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- v-model绑定表单,value数据响应 -->
    <div id="myapp">
        单选:
        <!-- :value="0"  则value变成数字形式,没有:则value是字符串类型-->
        <input type="radio" name="sex" :value="0" v-model='reObj.sex'>男
        <input type="radio" name='sex' :value="1" v-model='reObj.sex'>女
        <br> 多选：
        <input type="checkbox" name='sports' value='篮球' v-model='reObj.hobby'>篮球
        <input type="checkbox" name='sports' value='足球' v-model='reObj.hobby'>足球
        <input type="checkbox" name='sports' value='排球' v-model='reObj.hobby'>排球
        <input type="checkbox" name='sports' value='皮球' v-model='reObj.hobby'>皮球
        <br>下拉列表
        <!-- 下拉列表需要渲染,选中的结过通过v-model拿到 -->
        <select v-model='reObj.citys'>
           <option :value="item.cityId" v-for="(item,index) in cityList" ::key="index">{{item.name}}</option>
        </select>
        <button @click='sendBtn'>点击按钮</button>
    </div>
</body>

</html>
<script src="../vue.js"></script>
<script>
    new Vue({
        el: '#myapp',
        data: { //v-model绑定的默认的变量
            reObj: { //reObj 将多个变量放在对象中
                sex: 1, //绑定一个变量
                hobby: ['皮球'],
                citys: 3, //默认值现在变成
            },
            cityList: [{
                cityId: 1,
                name: '上海'
            }, {
                cityId: 2,
                name: '深圳'
            }, {
                cityId: 3,
                name: '武汉'
            }],
        },
        methods: {
            sendBtn() { //点击按钮触发事件
                // axios.post(url,this.reObj);//后台操作一般是这样的
                console.log(this.reObj);
            }
        }
    })
</script>

 

chengxue_123
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue中的v-model
weixin_45586870的博客
02-09 381
一、v-model的用法简介 在表单控件或者组件上创建双向绑定，其实就是给表单控件或者组件绑定数据。 二、案例 ①index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <me
Vue表单之v-model绑定下拉列表功能
10-17
主要介绍了Vue表单之v-model绑定下拉列表功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
v-model 在表单的使用
qq_42451776的博客
08-15 275
<div id="app"> <div> <h2> 1. 指定value </h2> 下拉单选框 <select v-model="isCheck2"> <option value="A">A</option> &l...
Vue基础语法之使用v-model绑定表单元素
wangchaohpu的博客
11-27 1406
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;08_表单输入绑定&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;!-- 1. 使
【前端框架学习】v-model与双向数据绑定
Jerry‘s word
01-14 747
v-model是唯一一个能够实现双向数据绑定的指令。 v-bind只能实现数据的单项绑定，从M层自动绑定到v中去，无法实现数据的双向绑定。 <div id='app'> <h4>{{message}}</h4> <input type="text" :value="message"> </div> <script src="https://cdn.jsdelivr.net/npm
06阻止默认事件，v-model与form表单
qq_49104166的博客
12-21 403
.stop是阻止默认事件， .once是只执行一次 默认事件是从内由外 <div id="app"> <button>点击隐藏</button> <div @click.once="fn">div标签 <p @click.stop.once="fn">p标签 <a @click.stop.once="fn($event)">a标签</a> </p> </div&g
Vue第一部分(4)：表单的双向数据绑定：v-model指令
CSDN专家-微编程的博客
08-13 181
v-model简介 之前数据绑定都是单向绑定，数据影响了视图渲染，但是反过来就不行（视图的变化不会影响模型数据）,而对于表单中的控件而言，我们需要数据的绑定是双向的，即：模型数据的变化会影响视图，同时视图发生变化也会同步到模型数据。 接下来学习的v-model是双向绑定，视图（View）和模型（Model）之间会互相影响。既然是双向绑定，一定是在视图中可以修改数据的组件，这样就限定了视图的元素类型。 目前v-model的可使用元素有： inputradiocheck...
vue自定v-model实现表单数据双向绑定问题
10-18
在Vue中，`v-model`指令被广泛用于实现这一功能，特别是在处理表单输入时。它简化了开发者在视图层和数据模型之间的交互，使得数据的更新能够即时反映到用户界面上。 在传统的`v-model`使用中，我们通常直接在表单...
vue 入门，v-model数据绑定
05-03
`v-model`是Vue中的一个指令，用于实现双向数据绑定，它使得视图（View）与模型（Model）之间的数据同步变得简单。这种机制让开发者能够在用户界面的表单控件上直接操作数据，同时更新视图，极大地提高了开发效率。 ...
Vue循环中多个input绑定指定v-model实例
10-14
当涉及到在循环中使用`v-model`时，通常是为了创建多个类似的表单元素，如在列表或表格中。以下将详细介绍如何在Vue循环中为多个`input`元素绑定不同的`v-model`实例。 1. **独立的v-model绑定**： 当在`v-for`...
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
01-21
表单类控件承载了一个网页数据的录入与交互，本章将介绍如何使用指令v-model完成表单的数据双向绑定。 6.1 基本用法 表单控件在实际业务较为常见，比如单选、多选、下拉选择、输入框等，用它们可以完成数据的录入、校验、提交等。 Vue.js提供了v-model指令，用于在表单类元素上双向绑定数据，例如在输入框上使用时，输入的内容会实时映射到绑定的数据上。  例如下面的例子： <div id=app> <input type=text v-model=message placeholder=请输入...> <p>输入的内容是：{{message}}</p> </div>
vue 表单之通过v-model绑定单选按钮radio
10-17
本文将深入探讨如何使用`v-model`指令来绑定Vue中的单选按钮（radio），以便实现更加高效和简洁的代码编写。 ### 一、基础用法 在Vue中，`v-model`用于在组件和Vue实例的数据之间建立双向绑定。对于单选按钮，我们...
v-model指令,表单操作绑定
俗人世界
07-26 414
v-model指令,表单操作绑定
小白学习Vue(?)--v-model在表单中的使用
假人一个的博客
11-13 470
1. v-model指令: v-model 指令在表单<input>、<textarea> 及 <select> 元素上创建双向数据绑定 v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源 本文只讨论v-model在普通dom标签上的使用，关于自定义组件的model选项，可以查看【xxx】 1.1. <input>文本框中使用: <div i
什么是v-model？
login_fxb的博客
09-23 626
v-model
Vue基础之v-model表单双向绑定
chemmhai的博客
07-06 198
1. 什么是双向绑定？       在MVVM（Model View ViewModel ）中，具体来说Model值得是js代码，view指的是DOM对象，也就是HTML中的内容，ViemModel可以看成是二者之间的媒介，本文的媒介由Vue来承担。在MVVM出现之前，人们常常用jquery来处理HTML中的内容，过程大致为：找到标签===>更改标签属性或者标签中的内容。该过程为命令式编程范式，也就是一步一步指定计算机要去做什么。Vue与
Vue v-model指令
Json的知识梦工厂
07-18 719
技术QQ交流群:294088839   &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;v-model&lt;/title&gt; &lt;script type="text/
Vue---自定义v-model的写法实现
COCOLI_BK的博客
11-16 784
子组件中这样写：props: {return ''}},// 自定义modelmodel: {},methods:{// 事件名要和model属性中event事件名一致},}子组件模板中：父组件模板中子组件标签上：此时父组件中打印myname值就会和子组件的输入值保持双向绑定！！！
vue中使用@mousedown、@mouseenter等鼠标事件失效解决办法
热门推荐
chengxue_123的博客
10-31 1万+
在vue中，使用@click点击事件没有任何问题 <el-button type="primary" icon="el-icon-plus" @click="searchBtn">添加用户</el-button> 但是将@click替换为@mouseenter、@mousedown等鼠标事件[非鼠标点击事件]时，发现事件不触发（也就是失效了） 此时应该在@mouseenter、@mouseenter等鼠标事件加上native属性就好了 <el-button ty
vue3中v-model绑定form表单
最新发布
06-28
### 回答1： 在Vue3中，可以使用v-model指令来绑定表单元素，例如input、textarea和select等。在表单元素上使用v-model指令，可以将表单元素的值与Vue实例中的数据进行双向绑定。 例如，我们可以在Vue组件中使用以下代码来绑定一个input元素： ``` <template> <div> <form> <label for="name">姓名：</label> <input type="text" id="name" v-model="name"> </form> </div> </template> <script> export default { data() { return { name: '' } } } </script> ``` 在上面的代码中，我们使用v-model指令将input元素的值与Vue实例中的name属性进行双向绑定。当用户在input元素中输入内容时，Vue实例中的name属性也会随之更新。反之，当Vue实例中的name属性发生变化时，input元素的值也会随之更新。 需要注意的是，在Vue3中，v-model指令的默认行为已经发生了变化。在Vue2中，v-model指令默认会将表单元素的value属性与Vue实例中的数据进行双向绑定。但在Vue3中，v-model指令默认会将表单元素的modelValue属性与Vue实例中的数据进行双向绑定。因此，在使用v-model指令时，需要根据表单元素的类型和属性进行相应的配置。例如，对于checkbox和radio等表单元素，需要使用:checked和:value等属性来进行绑定。 ### 回答2： 在Vue 3中，v-model绑定form表单变得更加灵活和易用。使用v-model，可以实现双向绑定，也就是说，当用户在表单中输入内容时，表单的值会自动更新到Vue实例中的数据，反之亦然。以下是在Vue 3中绑定form表单的步骤： 1. 在data选项中定义表单中的数据属性。例如，您可以定义一个名为“formData”的对象，其中包含表单中所有输入字段的值。 2. 使用v-model指令将数据属性绑定到表单输入组件上。例如，您可以在文本框中使用“v-model = 'formData.username'”将formData对象中的“username”属性与文本框值绑定。 3. 当用户在表单中输入内容时，v-model指令会自动更新formData对象中相应的属性值。 4. 如果您还需要在表单提交时执行自定义操作，可以使用@submit事件监听表单提交事件，并在事件处理程序中执行所需的操作。 以下是一个简单的注册表单的示例代码： ``` <template> <form v-on:submit.prevent="onSubmit"> <div> <label for="username">用户名：</label> <input type="text" id="username" v-model="formData.username" /> </div> <div> <label for="password">密码：</label> <input type="password" id="password" v-model="formData.password" /> </div> <button type="submit">注册</button> </form> </template> <script> export default { data() { return { formData: { username: '', password: '', }, }; }, methods: { onSubmit() { // 执行表单提交操作 console.log(this.formData); }, }, }; </script> ``` 在上面的示例中，formData对象用于存储输入字段的值，v-model指令将formData对象中的属性与输入字段值绑定在一起，@submit事件监听表单提交事件，并在事件处理程序中输出formData对象的值。 ### 回答3： Vue3中v-model绑定form表单，与Vue2有所不同，Vue3使用了Composition API。处理表单数据的方式也更加智能化，灵活性更高。下面是具体解析： 1. V-model的使用方式 在Vue3中，我们可以使用v-model实现数据的双向绑定。与Vue2相比，Vue3的v-model使用方式有所改变，我们不再传递一个value和update事件，而是使用一个ModelValue对象。同时，在定义组件时，需使用.emits属性指定自定义组件可触发的事件列表。在composition API中也提供了一个useModel函数，可以方便地定义双向绑定数据。 2. Form表单数据的处理 在Vue2中，我们一般使用v-model绑定form表单，通过@submit事件提交form表单数据。在Vue3中，我们可以使用v-model绑定表单元素，然后通过watch监听表单元素的变化。当表单元素发生变化时，watch函数可以自动更新数据。在提交表单时，我们可以直接使用ref获取表单数据，然后通过AJAX请求来提交数据。 3. 使用响应式对象管理表单数据 在Vue3中，我们可以使用reactive对象来管理表单数据，使表单数据变为响应式的。这样，在表单元素发生变化时，实时更新表单数据。同时，我们还可以使用toRefs函数将响应式对象转化为可响应的对象，使得更新表单数据时，可以自动更新视图。 4. 借助第三方组件库优化表单的处理 Vue3的组合式API让我们可以方便地封装逻辑，将表单数据的处理功能封装为一个能够重复使用的组件。借助第三方组件库，如ElementUI或Ant Design Vue等，我们可以在项目中快速地搭建出完备、效果优美的表单组件，进一步提高开发效率。 总之，Vue3中v-model绑定form表单，可以处理表单数据的方式更加智能化，操作灵活性更高。结合响应式对象等特性，我们可以更快地搭建出效率高、可复用的表单组件，减少开发成本和工作量，提高生产力。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值