九、v-model的使用

最新推荐文章于 2023-12-12 08:30:00 发布
最新推荐文章于 2023-12-12 08:30:00 发布
阅读量424 收藏
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lin_Willen/article/details/112423201
版权

01 v-model的使用和原理

1.1 v-model

  • 表单控件在实际开发中式非常常见的，特别是对于用户信息的提交，需要大量的表单
  • Vue中使用v-model指令来实现表单元素和数据的双向绑定
  • 案例解析：
    • 当我们在输入框输入内容时
    • 因为input中的v-model绑定了message，所以会实时将输入的内容传递给message,message发生改变
    • 当message发生改变时，因为上面我们使用Mustache语法，将message的值插入到DOM中，所以会发生响应的改变
    • 所以，通过v-model实现双向绑定
  • 我们也可以将v-model用在textarea中
  • v-model其实是一个语法糖，他背后的本质上是包含两个操作
  • v-bind绑定一个value属性
  • v-on指令给当前元素绑定input事件
<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>

1.2 代码实战

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>01-v-model的使用</title>
</head>
<body>

<div id="app">
  <!--  双向绑定-->
  <input type="text" v-model="message">{{message}}
  <hr>
  <!--  单向绑定实现双向绑定-->
  <!--  value动态单项绑定message -->
  <!--  input有一个事件，用于监听用户的输入,反向绑定message的值，实现双向绑定-->
  <input type="text" :value="message" @input="valueChange">
  <hr>
  <!--  另一种写法，不用函数调用，直接用$event-->
  <input type="text" :value="message" @input="message = $event.target.value">
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<!--如果没有安装vue.js，就用下面的代码-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript">
  const vm = new Vue({
    el: '#app',
    data: {
      message: 'hello world!'
    },
    methods: {
      valueChange(event){
        //一旦在界面中产生一个事件，浏览器会自动生成一个event对象
        //event对象中，有我们需要value,在event中的target中
        //在调用函数中，如果省略的实参，而定义函数时，有形参，会自动将event当做实参传入
        this.message = event.target.value;
      }
    }
  })
</script>
</body>
</html>

1.3 运行结果

在这里插入图片描述

02-v-model结合radio类型

2.1 实战代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>02-v-model结合radio类型</title>
</head>
<body>

<div id="app">
  <label for="male">
    <!--  如果不加name，会导致可以同时勾选男女，加上name，那么提交给数据库的时候，key是唯一的sex，所以只能选一个-->
    <!--<input type="radio" id="male" name="sex" value="男">男-->
    <!--  当然了，如果我们加上v-model，并且绑定同一个元素的话，name就可以不添加了，因为也是互斥的-->
    <input type="radio" id="male" value="男" v-model="sex">男
  </label>
  <label for="female">
    <input type="radio" id="female" value="女" v-model="sex">女
  </label>
  <h2>您选择的性别是：{{sex}}</h2>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<!--如果没有安装vue.js，就用下面的代码-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript">
  const vm = new Vue({
    el: '#app',
    data: {
      sex: '男'
    }
  })
</script>
</body>
</html>

2.2 运行结果

在这里插入图片描述

03-v-model结合checkbox类型

3.1 v-model:checkbox

  • 复选框分为两种情况：单个勾选框和多个勾选框
  • 单个勾选框：
    • v-model即为布尔值
    • 此时input的value并不影响v-model的值
  • 多个复选框：
  • 当是多个复选框时，因为可以选中多个，所以对应的data中属性是一个数组
  • 当选中某一个时，就会将input的value添加到数组中

3.2 代码实战

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>03-v-model结合checkbox类型</title>
</head>
<body>

<div id="app">
  <h2>{{message}}</h2>
  <label for="license">
    <input type="checkbox" id="license" v-model="isAgree">同意协议
  </label>
  <h2>您选择的是：{{isAgree}}</h2>
  <button :disabled="!isAgree">下一步</button>
  <hr>
  <!--  label没有id，那么点击文字，就不能达到勾选的目的，就只能去点击框勾选-->
  <label for="">
    <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">足球
    <input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
  </label>
  <h2>您选择的是：{{hobbies}}</h2>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<!--如果没有安装vue.js，就用下面的代码-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript">
  const vm = new Vue({
    el: '#app',
    data: {
      message: 'hello world!',
      isAgree: false,
      hobbies: []
    }
  })
</script>
</body>
</html>

3.3 运行结果

在这里插入图片描述

04-v-model结合select类型

4.1 v-model：select

  • 和checkbox一样，select也分单选和多选两种情况
  • 单选：只能选中一个值
    • v-model绑定的是一个值
    • 当我们选中option中的一个时，会将它对应的value赋值到mySelect中
  • 多选：可以选中多个值
    • v-model绑定的是一个数组
    • 当选中多个值时，就会将选中的option对应的value添加到数组mySelects中

4.2 代码实战

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>04-v-model结合select类型</title>
</head>
<body>

<div id="app">
  <!--  1.选择一个-->
  <select name="fruits" id="" v-model="fruit">
    <option value="">--未选择--</option>
    <option value="苹果">苹果</option>
    <option value="香蕉">香蕉</option>
    <option value="榴莲">榴莲</option>
    <option value="葡萄">葡萄</option>
    <option value="哈密瓜">哈密瓜</option>
  </select>
  <h2>您选择的水果是：{{fruit}}</h2>
  <hr>
  <!--  1.选择多个-->
  <select name="fruits" v-model="fruits" multiple>
    <option value="苹果">苹果</option>
    <option value="香蕉">香蕉</option>
    <option value="榴莲">榴莲</option>
    <option value="葡萄">葡萄</option>
    <option value="哈密瓜">哈密瓜</option>
  </select>
  <h2>您选择的水果是：{{fruits}}</h2>
  <hr>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<!--如果没有安装vue.js，就用下面的代码-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript">
  const vm = new Vue({
    el: '#app',
    data: {
      fruit: '',
      fruits: []
    }
  })
</script>
</body>
</html>

4.3 运行结果

在这里插入图片描述

05-v-model修饰符的使用

5.1 v-model

  • lazy修饰符
    • 默认情况下，v-model默认是在input事件中同步输入框的数据
    • 也就是说，一旦有数据发生改变对应的data中的数据就会自动发生改变
    • lazy修饰符可以让数据在失去焦点或者回车时才会更新
  • number修饰符
    • 默认情况下，在输入框无论我们输入的是字母还是数字，都会被当做字符串类型进行处理
    • 但是如果我们希望处理的是数字类型，那么最好直接将内容当做数字处理
    • number修饰符可以让在输入框中输入的内容自动转成数字类型
  • trim修饰符
    • 如果输入的内容首尾有很多空格，通常我们希望将其去掉
    • trim修饰符可以过滤内容左右两边的空格

5.2 代码实战

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>05-v-model修饰符的使用</title>
</head>
<body>

<div id="app">
  <!--  1.修饰符：lazy-->
  <!--  没有加lazy之前，实时绑定，加上之后，回车绑定-->
  <input type="text" v-model.lazy="message"><br>
  <h2>{{message}}</h2>
  <!--  2.修饰符：number-->
  <input type="number" v-model.number="age"><br>
  <h2>{{age}}——{{typeof age}}</h2>
  <!--  3.修饰符：trim-->
  <input type="text" v-model.trim="name">
  <h2>您输入的名字是：{{name}}</h2>
</div>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<!--如果没有安装vue.js，就用下面的代码-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript">
  const vm = new Vue({
    el: '#app',
    data: {
      message:'',
      age:'',
      name:''
    }
  })
</script>
</body>
</html>

5.3 运行结果

在这里插入图片描述

不会Java怎么找女朋友
关注
专栏目录
vue3双向数据绑定
duzhe17629085113的博客
12-10 344
input中的value取的是vm.data中的tel然后在页面显示。打印也是变量中的tel 原理:响应式数据，变量的值发生改变页面改变，这里页面的值改变，但是存储空间中的变量值没有变，value值发生改变 存储空间的值没有发生改变，所以需要双向数据改变 双向数据改变：用户输入的值可以改变存储空间中的data属性，页面也可以发生改变 双向绑定就需要获取用户输入的value值，赋给data源 ...
Vue自学笔记(3)——双向数据绑定v-model
xiecheng1995的博客
07-08 441
前言 今天主要给大家介绍双向数据绑定相关内容。在介绍内容之前先介绍一下Vue的开发架构——MVVM。啥是MVVM的？它是Model-View-ViewModel的简写，简单来说呢，就是model层可以影响view层，反过来view层也可以影响model层，model层可以简单理解为script框起来的那些东西，也就是业务逻辑层，view层就是视图层，就是浏览器能看到的内容。知道这些就够了。 双向数...
【Vue3】表单数据的双向绑定：v-model
早睡早起长头发的博客
08-04 4256
一、单行文本框的绑定 二、多行文本区的绑定 三、复选框的绑定 四、单选按钮的绑定 五、下拉列表框的绑定 六、常用的两个修饰符
vue3数据双向绑定
weixin_35756690的博客
01-09 938
Vue.js 的双向数据绑定是通过使用 v-model 指令实现的。 在 Vue 中，可以使用 v-model 指令在表单元素上创建双向数据绑定。它实际上是一个语法糖，等价于为输入元素绑定 v-bind:value 和 v-on:input 事件。 例如，在 Vue 中使用 v-model 绑定一个文本输入框： <template> <input v-model="messa...
vue2 v-model/v-text 中使用过滤器的方法示例
10-17
如果尝试在v-model或v-text中使用过滤器，如v-model="message | capitalize"，这种方式是不生效的。这是因为v-model和v-text在渲染之前不会处理过滤器，它们绑定的是数据本身，而不是DOM更新后的输出值。 6. 如何在...
jsx-v-model-一个Babel插件，将v-model引入JSX。-Vue.js开发
05-27
用法：npm i babel-plugin-jsx-v-model -D然后在插件示例.babelrc下将jsx-v-model添加到您的.babelrc文件：{“ presets”：[“ es2015”]，“ plugins”：[“ jsx-v-model“，” transform-vue-jsx“]}代码：Vue....
vue指令之表单控件绑定v-model v-model与v-bind结合使用
10-17
一、`v-model` 的基本使用 1. 单行文本框 `input[type="text"]` 和多行文本框 `textarea` `v-model` 将Vue实例的数据绑定到这些输入框的`value`属性。例如： ```html <input type="text" v-model="username" value=...
Vue循环中多个input绑定指定v-model实例
10-14
当涉及到在循环中使用`v-model`时，通常是为了创建多个类似的表单元素，如在列表或表格中。以下将详细介绍如何在Vue循环中为多个`input`元素绑定不同的`v-model`实例。 1. **独立的v-model绑定**： 当在`v-for`...
Vue3 双向数据绑定
哈
12-26 1768
示例：父组件传递100到子组件，子组件拿到之后显示出来，然后将值改为50，将在父组件中回显。最终结果如下图所示： Father.vue <template> <h2>父组件</h2> {{ money }} <hr> <!-- 属性绑定：将值传递给子组件 --> <!-- 绑定自定义事件，用来接收通知，接收到通知之后触发update_money方法--> <Son :money="money" @
Vue3 v-model:灵活的双向数据绑定
wxid_mtnujb6ipc0322的博客
10-20 9576
Vue3 中的 v-model 经历了一些改进，提供了更灵活的用法来实现双向数据绑定。除了原生的表单元素外，v-model 现在可以应用于任意组件，并允许我们自定义 prop 和事件名称。使用 Vue3 的 v-model，我们可以更加方便地实现组件之间的数据双向同步，减少了手动处理数据绑定的工作量。
vue2 VS vue3 数据双向绑定
anr_safely的博客
07-22 555
vue2 和 vue3 数据双向绑定的区别以及优缺点
Vue3进阶：Vue开发必备的基本功之双向数据v-model绑定详解及代码实战示例（文末群资料）
最新发布
SteveRocket's-Blog
12-12 3299
弄明白什么是双向数据绑定，双向数据绑定是指数据的变化能够自动反映在用户界面上，同时用户界面中的输入也能够自动更新数据。在传统的 Web 开发中，通常需要手动监听用户输入的变化并更新数据，或者手动更新数据后再重新渲染用户界面。而在 Vue 中，通过双向数据绑定，我们只需要关注数据的变化，Vue 会自动处理数据与用户界面之间的同步。
Vue学习笔记之函数、高阶函数、v-model的应用
医疗数据
05-24 4965
一、哪些函数是响应式的： 1.push 在后面追加数据 5.sort() 排序 6.reverse() 顺序翻转 abcd ----> dcba 红框中的方式修改数组中的数据时，界面没有响应式的效果 二、高阶函数：对数组的操作 1、filter函数，返回布尔值 返回值是true，则返回当前的值；如果返回值是false，则不返回当前值。循环判断数据里面的数据，直到完成； 2、map函数，对数组里面的值进行处理后，返回相应的值。循环判断数据里面的数据，直到完成。 3、r.
vue3数据的双向绑定
热门推荐
weixin_57167969的博客
11-18 1万+
vue3关于数据的双向绑定 一、script setup 现在，没必要把数据写到data里面，或者是写一个setup函数，再进行return出去。 import进来的组件，可以直接在页面中使用，不再需要vue2的component或者是setup函数的return了。 <script setup> import Header from '../home/Header.vue' import Footer from '../home/Footer.vue' </script> 组件中
vue2与vue3双向数据绑定的区别
田兴的博客
06-29 5007
前言： 新的响应式机制采用了ES6的ProxyApi，抛弃了Object.defineProperty() Vue2双向数据绑定存在的问题： 关于对象： Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对property执行 getter/setter转化，所以property必须在 data对象上存在才能让 Vue 将它转换为响应式的。 关于数组： Vue 不能检测以下数组的变动： 当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] =
vue3_实现数据双向绑定
gzmhxsn的博客
11-20 433
vue3实现数据双向绑定
【vue3】关于vue3中的数据双向绑定
zhangawei123的博客
05-29 4475
，`doubleCount`的值将根据`count`的变化而动态更新。你可以使用`ref`和`reactive`来创建响应式数据，使用`computed`来创建计算属性，使用`watch`来监听数据的变化，以及使用`toRefs`来在模板中解构响应式对象的属性。`，现在可以通过`userRefs.name`和`userRefs.age`访问属性。2. ref：`ref`函数用于创建一个简单的响应式数据。1. 响应式数据：在 Vue 3 中，使用`ref`和`reactive`来创建响应式数据。
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、付费专栏及课程。

余额充值