表单绑定v-model

最新推荐文章于 2024-04-13 13:23:31 发布
最新推荐文章于 2024-04-13 13:23:31 发布
阅读量163 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44768794/article/details/115251468
版权

表单绑定

v-model使用及原理

我们经常使用到input、txetarea这些表单元素，vue使用v-model实现这些标签数据的双向绑定，他会根据控件类型自动选取正确的方法来更新元素

1.1 v-model的使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <input type="text" v-model="message">
  <h2>{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    }
  })
</script>

</body>
</html>

1.2 v-model的原理

v-model本质是语法糖：
　1.v-bind绑定一个value属性
　2.v-on指令给当前元素绑定input事件

<input type="text" v-model="message">

相当于

<input type="text" :value="message" @input="message=$event.target.value">

<!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>
  <div id="app">
    <!-- <input type="text" v-model="message"> -->
    <!-- <input type="text" :value="message" @input="valueChange"> -->
    <input type="text" :value="message" @input="message=$event.target.value">
    <h2>{{message}}</h2>
  </div>
  <script src="/js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: 'hi'
      },
      methods: {
        valueChange(event) {
          this.message = event.target.value
        }
      }
    })
  </script>
</body>
</html>

v-model结合radio类型

当存在多个单选框时，可以不用那么属性限制单选，直接用v-model
注意：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>

  <div id="app">
    <label for="male">
      <input type="radio" id="male" value="男" v-model="sex">男
    </label>
    <label for="female">
      <input type="radio" id="female" value="女" v-model="sex">女
    </label>
    <h4>您的性别是：{{sex}}</h4>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        message: 'hi',
        sex: '女'
      }
    })
  </script>
</body>

</html>

在这里插入图片描述

v-model结合checkbox使用

复选框分为两种情况：单个勾选框和多个勾选框
单个勾选框：
v-model即为Boolean类型
此时input的value并不影响v-model的值
同意协议下一步按钮失效
在这里插入图片描述
在这里插入图片描述

多个勾选框：
当时多个复选框时，因为需要选取多个，所以data值为数组类型
当选中其中一个时，就会将value的值添加到数组中

<!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>
  <div id="app">
    <!-- 单选框 -->
   <label for="agree">
      <input type="checkbox" name="同意" id="agree" v-model="isAgree">同意协议
    </label>
    <h4>你选择的是：{{isAgree}}</h4>
    <button :disabled="isAgree">下一步</button>
    <h4>{{message}}</h4> 

    <!-- 多选框 -->
    <input type="checkbox" value="篮球" v-model="hobbies">篮球
    <input type="checkbox" value="足球" v-model="hobbies">足球
    <input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
    <input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
    <h4>您的爱好是：{{hobbies}}</h4>
  </div>
  <script src="/js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: 'hi',
        isAgree: false,
        hobbies: []
      }
    })
  </script>
</body>
</html>

v-model结合select使用

单选：只能选中一个值。
　　v-model绑定的是一个值
　　当我们选中option中的一个时，会将它对应的value赋值到mySelect中
多选：可以选中多个值
v-model绑定的是一个数组
当选中多个值时，就会将选中的option对应的value添加到数组mySelects中

<!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>
  <div id="app">
    <select name="abc" v-model="fruit">
      <option value="苹果">苹果</option>
      <option value="榴莲">榴莲</option>
      <option value="香蕉">香蕉</option>
      <option value="樱桃">樱桃</option>
      <option value="葡萄">葡萄</option>
    </select>
    <h4>您的选择是：{{fruit}}</h4>
    <select name="abc" v-model="fruits" multiple>
      <option value="苹果">苹果</option>
      <option value="榴莲">榴莲</option>
      <option value="香蕉">香蕉</option>
      <option value="樱桃">樱桃</option>
      <option value="葡萄">葡萄</option>
    </select>
    <h4>你的选择是：{{fruits}}</h4>
  </div>
  <script src="/js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        fruit: '香蕉',
        fruits: []
      }
    })
  </script>
</body>
</html>

在这里插入图片描述

input中的值绑定

用v-for循环遍历，v-bind进行绑定

<!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>
  <div id="app">
    <label v-for="item in originFruits">
      <input type="checkbox" name="item" id="item" :value="item" v-model="hobbies">{{item}}
    </label>
    <h4>您的选择是：{{hobbies}}</h4>
  </div>
  <script src="/js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        fruit: '香蕉',
        fruits: [],
        hobbies: [],
        originFruits: ['苹果','榴莲','香蕉','樱桃','葡萄']
      }
    })
  </script>
</body>

</html>

在这里插入图片描述

v-model修饰符的使用

5.1 lazy修饰符

lazy修饰符：
默认情况下，v-model默认是在input事件中同步输入框的数据
一旦有数据发生改变，data数据也会发生改变
lazy修饰符可以让数据在失去焦点或回车时才会更新
.lazy相当于一个延迟加载的过程

5.2 number修饰符

默认情况下，不管我们输入的是字符还是数字，都会被当作字符串类型进行处理
number修饰符可以直接让在输入框中输入的内容自动转成数值型

5.3 trim修饰符

如果输入的内容首尾有很多空格
trim修饰符可以去掉内容左右两边的空格

<!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>
  <div id="app">
    <input type="text" v-model.lazy="message">
    <h4>{{message}}</h4>
    <input type="text" v-model.number="num">
    <h4>{{num}}---{{typeof num}}</h4>
    <input type="text" v-model.trim="item">
    <h4>当前输入：{{item}}</h4>
  </div>
  <script src="/js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        message: '',
        num: 0,
        item: ''
      }
    })
  </script>
</body>
</html>

在这里插入图片描述

cb++
关注
vuejs学习总结（五）——表单绑定v-model
l118
04-18 275
概述 表单控件在实际开发中是非常常见的，特别是对于用户信息的提交，需要大量的表单 vue 中使用v-model指令来实现表单元素和数据的双向绑定 案例解析： 当我们在输入框中输入内容时， 因为Input中的v-model绑定了message,所以会实时的将输入的内容传递给message,mesage发生改变 当message发生改变时，因为我们是用来Mustache语法，将message的值...
Vue表单绑定: v-model
qq_41555595的博客
08-10 247
Vue表单绑定: v-model 双向绑定 v-model = v-bind + @input(事件) 1.v-model的基本基本使用 <div id="app"> <input type="text" v-model="msg"> {{msg}} </div> <script> const vue = new Vue({ el: '#app', data: { m
Vue表单绑定v-model
愤怒的小兵
03-03 985
Vue表单绑定v-model基础用法绑定text绑定textarea绑定checkbox单个复选框多个复选框绑定radio绑定select单个select多个selectv-for渲染绑定value 基础用法 v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值，而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 dat...
vue表单输入绑定（v-model）
性感码农在线写笔记
02-19 323
https://cn.vuejs.org/v2/guide/forms.html 一、基础用法 v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件： text 和 textarea 元素使用 value property 和 input 事件； checkbox 和 radio 使用 checked property 和 change 事件； select 字段将 value 作为 prop 并将 change 作为事件。 <div id="app"> .
vue指令之表单控件绑定v-model v-model与v-bind结合使用
10-17
在Vue.js中，`v-model` 是一个非常重要的指令，它实现了双向数据绑定，使得Vue实例的数据和表单控件的值能够实时同步。在HTML表单元素上使用`v-model`，我们可以轻松地处理用户输入，而无需手动编写事件监听器和数据...
表单控件绑定：checkbox表单绑定v-model
YY的博客
11-21 1550
表单控件绑定：checkbox表单绑定v-model
Vue循环中多个input绑定指定v-model实例
10-14
在Vue.js中，`v-model`是一个非常强大的特性，它实现了视图与数据的双向绑定，使得我们在处理用户输入时能轻松地获取和更新数据。当涉及到在循环中使用`v-model`时，通常是为了创建多个类似的表单元素，如在列表或...
vue的 简单表格例子 v-if v-show v-model
weixin_30677617的博客
02-18 543
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta name="viewport" content...
v-model表单输入绑定
zyz00000000的博客
11-06 638
1. 基础用法 （1）v-model指令 v-model指令在表单&lt;input&gt;、&lt;textarea&gt;及&lt;select&gt;元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。 v-model会忽略所有表单元素的value、checked、selected特...
vue中的v-model绑定表单
芋泥啵啵月亮的博客
07-11 108
概述 在用户注册页面，经常需要大量的表单。在vue中，使用v-model指令来实现表单元素与数据的双向绑定。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U
【vue学习】—表单绑定(v-model)
scj1014的博客
01-09 295
1. 基本概念 表单控件在实际开发中是非常常见的。特别是对于用户信息的提交，需要大量的表单。 Vue中使用v-model指令来实现表单元素和数据的双向绑定。 <div id="app"> 输入：<input type="text" v-model="msg"> <h2>{{msg}}</h2> </div> &l...
Vue 中 双向绑定数据
梓鸿
04-10 236
Vue 中 双向绑定数据 1、文本 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script s...
Vue表单输入绑定
冲出仁川，走出马德里，故事还会再继续
07-13 742
文章目录1、简介2、单行文本输入框3、多行文本输入框4、复选框5、单选按钮6、选择框7、值绑定7.1 复选框7.2 单选按钮7.3 选择框的选项8、实例：用户注册 1、简介   表单控件的数据绑定就是用v-model指令实现的，它会根据控件类型自动选取正确的方法更新元素。由于表单控件有不同的类型，如文本输入框、复选框、单选按钮、选择框等，v-model指令在不同的表单控件上应用时也会有所差异。 2、单行文本输入框 <!DOCTYPE html> <html> <head&gt
从0开始写Vue项目-Vue实现用户个人信息界面上传头像
不愧是暮言的博客
02-24 5764
都知道，我们在写项目的时候，最想给自己项目增加实用性了，例如我们的头像上传以及个人的各种信息等等。我们刚刚已经做好了我们的上传接口，那么我们现在就趁热打铁，将我们的头像上传功能解决一下。二、个人信息界面我们的个人信息界面由我们的头像以及我们的表格组成，那么就说明我们需要去获取我们用户的数据了我们之前是做过用户数据存储的，就是利用token来将我们用户的数据存放在我们的浏览器里面，然后利用来查找出我们的用户数据。三、头像上传对于头像上传，我们依然用到我们之前的接口和组件来实现该功能。
『VUE』16. v-model表单输入和绑定（详细图文注释）
最新发布
MZH
04-13 1719
『VUE』16. v-model表单输入和绑定（详细图文注释）
数据双向绑定v-model的使用和原理
小小前端攻城狮的博客
03-25 6590
简述 表单控件在实际开发中式非常常见的，特别是对于用户信息的提交，需要大量的表单 Vue中使用v-model指令来实现表单元素和数据的双向绑定 简单使用 当我们在输入框输入内容时,因为input中的v-model绑定了message，所以会实时将输入的内容传递给message,message发生改变 当message发生改变时，因为上面我们使用Mustache语法，将message的值插入到DOM中，所以会发生响应的改变 所以，通过v-model实现双向绑定,我们也可以将v-model用
VUE表单数据绑定
qq_34400242的博客
05-03 2246
可以用 v-model 指令在表单input、textarea及 select 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。 tips:v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而...
Vuejs v-model教程：实现表单数据双向绑定详解
在Vue.js的学习过程中，理解并掌握`v-model`指令对于实现表单数据的双向绑定至关重要。表单控件是Web开发中的核心组件，它们允许用户输入和交互数据，包括单选、多选、下拉选择和输入框等。Vue.js凭借其强大的指令...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值