v-model的使用

最新推荐文章于 2025-06-11 20:51:47 发布
最新推荐文章于 2025-06-11 20:51:47 发布
阅读量7.1k 收藏 26
点赞数 12
CC 4.0 BY-SA版权
分类专栏： VUE 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_46112274/article/details/122835257
本文详细介绍了Vue.js中的v-model指令，包括其基本使用、三种实现双向绑定的方式、工作原理，以及在radio、checkbox、select元素中的应用。同时，还探讨了v-model的修饰符lazy、number、trim的用法，展示了如何在不同场景下精细化控制数据绑定。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

v-model的使用

1、v-model基本使用

在这里插入图片描述

2、三种方式实现双向绑定

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <!-- 方式1：v-model双向绑定 -->
    <!-- <input type="text" v-model="message"> -->

    <!-- 方式2：使用方法获取event中的值 -->
    <!-- <input type="text" :value="message" v-on:input="valueChange"> -->
    
    <!-- 方式3： -->
    <input type="text" :value="message" @input="message = $event.target.value">
    <h2>{{message}}</h2>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        message:'你好'
      },
      methods: {
        valueChange(event){
          this.message = event.target.value;
        }
      }
    });
  </script>
</body>

</html>

在这里插入图片描述

3、v-model原理

在这里插入图片描述

4、v-model结合radio类型使用

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <label id="male">
      <input type="radio" id="male" value="男" v-model="gender">男</input>
    </label>
    <label id="female">
      <input type="radio" id="female" value="女" v-model="gender">女</input>
    </label>
    <h2>您选择的性别是：{{gender}}</h2>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        message:'你好',
        gender: '男'
      },
      methods: {
      
      }
    });
  </script>
</body>

</html>

在这里插入图片描述

在这里插入图片描述

5、v-model结合checkbox类型

5.1、单个复选按钮

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <label id="agree">
      <input type="checkbox" id="agree" v-model="isAgree">同意协议</input>
      <h2>你的选择是：{{isAgree}}</h2></h2>
      <button :disabled="!isAgree">下一步</button>
    </label>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        message:'你好',
        isAgree: false
      },
      methods: {
      
      }
    });
  </script>
</body>

</html>

在这里插入图片描述
在这里插入图片描述

5.2、多个复选按钮

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <!-- checkbox多选框 -->
    <label id="hobbies">
      <input type="checkbox" value="篮球" v-model="hobbies">篮球</input>
      <input type="checkbox" value="足球" v-model="hobbies">足球</input>
      <input type="checkbox" value="排球" v-model="hobbies">排球</input>
      <input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球</input>
    </label>
    <h2>您的爱好是：{{hobbies}}</h2>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        message:'你好',
        hobbies: []
      },
      methods: {
      
      }
    });
  </script>
</body>

</html>

在这里插入图片描述

6、v-model:select

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <!-- 1、选择一个 -->
    <select id="abc" name="" v-model="fruit">
      <option value="苹果">苹果</option>
      <option value="香蕉">香蕉</option>
      <option value="榴莲">榴莲</option>
      <option value="葡萄">葡萄</option>
    </select>
    <h2>您选择的水果是：{{fruit}}</h2>

    <!-- 1、选择多个 -->
    <select id="abc" name="" v-model="fruits" multiple>
      <option value="苹果">苹果</option>
      <option value="香蕉">香蕉</option>
      <option value="榴莲">榴莲</option>
      <option value="葡萄">葡萄</option>
    </select>
    <h2>您选择的水果是：{{fruits}}</h2>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        message:'你好',
        fruit: '苹果',
        fruits: []
      },
      methods: {
      
      }
    });
  </script>
</body>

</html>

在这里插入图片描述

在这里插入图片描述

7、input中的值绑定

在这里插入图片描述
在这里插入图片描述

8、v-model中的修饰符lazzy/number/trim

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <!-- 1、懒加载，当鼠标从输入框中失去焦点，或者在输入框中点击回车时才会进行双向绑定 -->
    <input type="text" v-model.lazy="message"/>
    <h2>{{message}}</h2>
    
    <!-- 2、修饰符：number -->
    <input type="number" v-model.number="age"/>
    <h2>{{age}}---{{typeof age}}</h2>
   
    <!-- 3、修饰符：trim -->
    <input type="text" v-model.trim="name"/>
    <h2>您输入的值为：{{name}}</h2>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message:'你好',
        age: 0,
        name: ''
      },
      methods: {
      
      }
    });
  </script>
</body>

</html>
Vue笔记：v-model的使用
ma_no_lo的博客
08-26 1414
在了解v-model之前，我们务必要明白v-model本质上是一种语法糖，它其实是由动态属性绑定和input事件绑定而形成的双向数据绑定。
三、v-model指令的详细用法、事件修饰符、按键修饰符
qq_63011146的博客
02-02 8567
① v-model指令的详细用法 1.v-model指令，绑定文本框的内容，实现双向数据绑定 <input type="text" v-model="name"> 2.v-model指令，绑定多行文本框的内容，实现双向数据绑定 注意：在文本区域插值 (<textarea>{{text}}</textarea>) 并不会生效，应用 v-model 来代替。 <textarea cols="80" rows="4" v-model="address"&gt
Vue：v-model 简单讲解（通俗
最新发布
全局可见
06-11 431
v-model
v-model的使用和原理（超详细，持续更新）
m0_57030573的博客
12-29 4750
v-model的使用和原理，v-model双向数据绑定，超级详细
vue2 v-model/v-text 中使用过滤器的方法示例
10-17
如果尝试在v-model或v-text中使用过滤器，如v-model="message | capitalize"，这种方式是不生效的。这是因为v-model和v-text在渲染之前不会处理过滤器，它们绑定的是数据本身，而不是DOM更新后的输出值。 6. 如何在...
vue.js指令v-model使用方法
01-21
vue.js的一大功能便是实现数据的双向绑定，本文就表单处理时运用v-model指令实现双向绑定做一个介绍： v-model这个指令只能用在<input>, <select>,<textarea>这些表单元素上，所谓双向绑定，指的...
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
10-17
在表单控件如输入框、文本域、单选按钮、复选框等元素上使用`v-model`，可以实现实时更新数据，极大地简化了前端开发的工作流程。 6.1 基本用法 对于最常见的输入框`<input type="text">`，`v-model`的使用方式...
v-model的基本使用
qq_32906513的博客
07-28 333
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">{{message}} </div&gt
vue中v-model的应用及使用详解
08-27
v-model用于表单数据的双向绑定，其实它就是一个语法糖。这篇文章主要介绍了vue中v-model的应用,需要的朋友可以参考下
v-model的基本使用；v-model原理；v-model绑定（textarea、checkbox、radio、select）；v-model的值绑定；v-model修饰符
qq_54075517的博客
08-10 6698
v-model的基本使用；v-model原理；v-model绑定（textarea、checkbox、radio、select）；v-model的值绑定；v-model修饰符
v-model
qq_33879627的博客
09-21 568
（十）v-model 10.1 v-model的基本使用 <div id="app"> <!-- 输入框内容修改，message也修改，修改message，input内容也修改，双向绑定 --> <input type="text" v-model="message">{{message}} </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue
v-model的用法
Q2159621453的博客
05-26 709
1、v-model的使用原理。 <body> <div id="root"> <input type="text" :value="msg" @input="changeMsg"> <h2>{{msg}}</h2> </div> <script> const vm = new Vue({ el:"#root",
v-mode详解以及具体的使用示例
five-five
03-07 1762
在 Vue.js 中，组件是可重用的 Vue 实例，它们拥有自己的数据和方法，并可以接受来自父组件的 props 数据。在组件中使用 `v-model` 时，可以实现组件和父组件之间的双向数据绑定。 组件中使用 `v-model` 的原理是：父组件将一个值传递给子组件的 props 属性，子组件通过 `$emit` 方法触发一个自定义事件，将新值传递回父组件。父组件接收到新值后，更新数据，从而实现双向绑定。 在组件中使用 `v-model` 时，需要在组件中定义一个 `model` 选项，该选项用于指定
v-model使用详解
03-22
使用 v-model 指令可以简化表单元素的操作，提高开发效率。 v-model 指令的使用方法如下： 1. 对于单选框和复选框，v-model 绑定的是选中状态的值。 2. 对于文本框和文本域，v-model 绑定的是输入的值。 3. 对于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值