v-model的详细讲解

v-model是什么？

v-model 是Vue框架的一种内置的API指令，本质是一种语法糖写法。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

为什么使用v-model？

v-model指令可以在表单 input、textarea以及select元素上创建双向数据绑定它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖，它负责监听用户的输入事件来更新数据，并在某种极端场景下进行一些特殊处理；

什么场景下会使用v-model？

表单提交是开发中非常常见的功能，也是和用户交互的重要手段：比如用户在登录、注册时需要提交账号密码；比如用户在检索、创建、更新信息时，需要提交一些数据；这些都要求我们可以在代码逻辑中获取到用户提交的数据，我们通常会使用v-model指令来完成

示例：v-model的基本使用 在这里插入图片描述

v-model的原理

官方有说到，v-model的原理其实是背后有两个操作：

v-bind绑定value属性的值；
v-on绑定input事件监听到函数中，函数会获取最新的值赋值到绑定的属性中；

那v-model是双向绑定吗？

是的你可以用 v-model 指令在表单、及 <select> 元素上创建==双向数据绑定==。 —— vue2官方文档 </blockquote> <h2>那 v-model 是单向数据流吗？</h2> <blockquote class="multiquote-1"> 是的，虽然官方没有明确表示这点，但我们可以捋一捋两者的关系。 </blockquote> <h4>什么是单项数据流？</h4> 父组件可以向值组件传递数据,并且改变值组件的值,而子组件不能改变父组件传递给它的 prop 属性，官方推荐的做法是它抛出事件，通知父组件自行改变绑定的值。 <h4>v-model 的做法是怎样的？</h4> v-model 做法完全符合单项数据流。甚至于，它给出了一种在命名和事件定义上的规范。众所周知 .sync 修饰符是单向数据流的另一个典型范式。 <img src="https://img-blog.csdnimg.cn/104fc4c846f246d282015d51b43b2134.png" alt="在这里插入图片描述"> 单向数据流：总结起来其实也就8个字：==数据向下，事件向上==。 那接下来，我们再来看一下v-model是如何绑定一下其他的表单类型：textarea、checkbox、radio、select等属性的 <h2>v-model绑定textarea</h2> <h4>我们来看一下绑定textarea</h4> <figure><img src="https://img-blog.csdnimg.cn/ee9bc1b883564164babf2a6c23a14234.png" alt="在这里插入图片描述"><figcaption>在这里插入图片描述</figcaption></figure> <pre class="custom"><code class="hljs"> <div class="demo"> <textarea v-model="article" cols="30" rows="10"> </textarea> <h2>article当前的值是：{{ article }}</h2> </div> </code></pre> <pre class="custom"><code class="hljs">export default { name: 'demo', data () { return { article: "a" } } } </code></pre> 效果： <img src="https://img-blog.csdnimg.cn/92a7d042e95849c4a58e1679b8096372.gif" alt="a"> <h3>v-model绑定checkbox</h3> 我们来看一下v-model绑定checkbox：单个勾选框和多个勾选框 <ul> <li><section>单个勾选框：v-model即为布尔值。此时input的value并不影响v-model的值。</section></li><li><section>多个复选框：当是多个复选框时，因为可以选中多个，所以对应的data中属性是一个数组。当选中某一个时，就会将input的value添加到数组中。</section></li></ul> 单选框示例： <figure><img src="https://img-blog.csdnimg.cn/c143d231e98240148491829f1b0f2511.png" alt="在这里插入图片描述"><figcaption>在这里插入图片描述</figcaption></figure> <pre class="custom"><code class="hljs">export default { name: 'demo', data () { return { isAgree: "true" } } } </code></pre> 效果： <img src="https://img-blog.csdnimg.cn/ee82dedb59f140ceb0b6947a392f4e72.gif" alt="a"> <figure><img src="https://img-blog.csdnimg.cn/db76b25d44d14e3197f645765abb6278.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAemF5eW8=,size_20,color_FFFFFF,t_70,g_se,x_16" alt="在这里插入图片描述"><figcaption>在这里插入图片描述</figcaption></figure> <pre class="custom"><code class="hljs">  <input type="checkbox" v-model="sport" value="篮球" />篮球 <input type="checkbox" v-model="sport" value="足球" />足球 <input type="checkbox" v-model="sport" value="羽毛球球" />羽毛球球 <input type="checkbox" v-model="sport" value="兵乓球" />兵乓球 您的爱好有：{{ sport }} </code></pre> <pre class="custom"><code class="hljs">export default { name: 'demo', data () { return { message: "内容", sex: '', // 当要默认选中时要填入值即可例：sex='男' // agree: false, sport: [], // fruits: '', // fruits2: [], // hobbies: [], // origintobbies: ["篮球", "足球", "乒乓球", "羽毛球", "桌球"], // age: 0, // name: '' } } } </code></pre> 效果示例： <figure><img src="https://img-blog.csdnimg.cn/fd7093a96c964fc498a97c77cd1f8f0d.gif" alt="请添加图片描述"><figcaption>请添加图片描述</figcaption></figure> <h4>v-model绑定radio</h4> v-model绑定radio，用于选择其中一项； <img src="https://img-blog.csdnimg.cn/ffc6bc01b3804f46847991732d6be5a2.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAemF5eW8=,size_20,color_FFFFFF,t_70,g_se,x_16" alt="在这里插入图片描述"> 效果示例： <img src="https://img-blog.csdnimg.cn/41f8b7b7feb147498db2919b7f2bd542.gif" alt="请添加图片描述"> <h2>v-model绑定select</h2> 和checkbox一样，select也分单选和多选两种情况。 <ul> <li><section>单选：只能选中一个值，v-model绑定的是一个值。当我们选中option中的一个时，会将它对应的value赋值到fruit中；</section></li><li><section>多选：可以选中多个值，v-model绑定的是一个数组。当选中多个值时，就会将选中的option对应的value添加到数组fruit中； <img src="https://img-blog.csdnimg.cn/6908a5c27f324d15ba776ed5ec9526fc.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAemF5eW8=,size_20,color_FFFFFF,t_70,g_se,x_16" alt="在这里插入图片描述"></section></li></ul> <pre class="custom"><code class="hljs"><select name="abc" v-model="fruits2" multiple> <option value="香蕉">香蕉</option> <option value="苹果">苹果</option> <option value="橙子">橙子</option> <option value="榴莲">榴莲</option> </select> </code></pre> <pre class="custom"><code class="hljs">export default { name: 'demo', data () { return { message: "内容", sex: '', // 当要默认选中时要填入值即可例：sex='男', agree: false, sport: [], fruits: '', fruits2: [], hobbies: [], origintobbies: ["篮球", "足球", "乒乓球", "羽毛球", "桌球"], age: 0, name: '' } } } </code></pre> 效果示例： <img src="https://img-blog.csdnimg.cn/b85b52ea1988466dbb08633e078a9eaf.gif" alt="请添加图片描述"> <img src="https://img-blog.csdnimg.cn/f098d765ec3c4e1bacbd0b7af373d75b.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAemF5eW8=,size_20,color_FFFFFF,t_70,g_se,x_16" alt="在这里插入图片描述"> 效果示例： <img src="https://img-blog.csdnimg.cn/8af8319ec25c4972bd3ff65e05f74724.gif" alt="请添加图片描述"> <h2>v-model的值绑定</h2> <blockquote class="multiquote-1"> 目前我们在前面的案例中大部分的值都是在template中固定好的：比如gender的两个输入框值male、female；比如hobbies的三个输入框值basketball、football、tennis. 在真实开发中，我们的数据可能是来自服务器的，那么我们就可以先将值请求下来，绑定到data返回的对象中，再通过v-bind来进行值的绑定，这个过程就是值绑定。这里不再给出具体的做法，因为还是v-bind的使用过程。 </blockquote> <h2>v-model修饰符 - lazy</h2> <h3>lazy修饰符是什么作用呢？</h3> <blockquote class="multiquote-1"> 默认情况下，v-model在进行双向绑定时，绑定的是input事件，那么会在每次内容输入后就将最新的值和绑定的属性进行同步；，如果我们在v-model后跟上==lazy==修饰符，那么会将绑定的事件切换为 change 事件，只有在提交时（比如回车）才会触发 </blockquote> <figure><img src="https://img-blog.csdnimg.cn/e4eec2d73b574c9ab702b5989533c806.png" alt="在这里插入图片描述"><figcaption>在这里插入图片描述</figcaption></figure> <pre class="custom"><code class="hljs">    <input type="text" v-model.lazy="message" /> <br /> {{ message }} </code></pre> <pre class="custom"><code class="hljs">export default { name: 'demo', data () { return { message: "内容", sex: '', // 当要默认选中时要填入值即可例：sex='男', agree: false, sport: [], fruits: '', fruits2: [], hobbies: [], origintobbies: ["篮球", "足球", "乒乓球", "羽毛球", "桌球"], age: 0, name: '' } } } </code></pre> 效果示例：<img src="https://img-blog.csdnimg.cn/d0d6b60df9b34f729eb67e1851e5099c.gif" alt="请添加图片描述"> <h3>v-model修饰符 - number</h3> 我们先来看一下v-model绑定后的值是什么类型的：message总是string类型，即使在我们设置type为number也是string类型； <figure><img src="https://img-blog.csdnimg.cn/2725f2f4862048e98b51b2cfd4eefc0f.png" alt="在这里插入图片描述"><figcaption>在这里插入图片描述</figcaption></figure> <blockquote class="multiquote-1"> 如果我们希望转换为数字类型，那么可以使用 ==.number== 修饰符： </blockquote> <figure><img src="https://img-blog.csdnimg.cn/b3fe879fc95140d0904df11c44dc67d4.png" alt="在这里插入图片描述"><figcaption>在这里插入图片描述</figcaption></figure> <blockquote class="multiquote-1"> 另外，在我们进行逻辑判断时，如果是一个string类型，在可以转化的情况下会进行隐式转换的：下面的score在进行判断的过程中会进行隐式转化的 </blockquote> <img src="https://img-blog.csdnimg.cn/b578faab62f244c797e2551c29597590.png" alt="在这里插入图片描述"> 效果示例：<img src="https://img-blog.csdnimg.cn/eb5e6855a3304bd4937a330c9fdec82a.gif" alt="请添加图片描述"> <h3>v-model修饰符 - trim</h3> 如果要自动过滤用户输入的守卫空白字符，可以给v-model添加 ==trim== 修饰符 <img src="https://img-blog.csdnimg.cn/ddd42c86c0b240c4be0c5f37af738e23.png" alt="在这里插入图片描述"> 效果示例： <img src="https://img-blog.csdnimg.cn/744294b910fe4920969d21a6d0517317.gif" alt="a"> 全部示例代码： <pre class="custom"><code class="hljs"><!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"> <title>Document</title>  <script src="./vue.min.js"></script> </head> <body> <div id="app">  <input type="text" v-model="message"> {{message}} <br>  <label for="man"> <input type="radio" value="男" v-model='sex' id="man">男 </label> <label for="girl"> <input type="radio" value="女" v-model='sex' id="girl">女 </label> 您选中的是：{{sex}} <br>  <label for="agree"> <input type="checkbox" id="agree" v-model="agree">同意 </label> <button :disabled="!agree">下一步</button> 您的选择：{{agree}} <br>  <input type="checkbox" v-model="sport" value="篮球">篮球 <input type="checkbox" v-model="sport" value="足球">足球 <input type="checkbox" v-model="sport" value="羽毛球球">羽毛球球 <input type="checkbox" v-model="sport" value="兵乓球">兵乓球您的爱好有：{{sport}} <br>  <select name="abc" v-model='fruits'> <option value="香蕉">香蕉</option> <option value="苹果">苹果</option> <option value="橙子">橙子</option> <option value="榴莲">榴莲</option> </select> 您选中的水果是{{fruits}} <br> <br>  <select name="abc" v-model="fruits2" multiple> <option value="香蕉">香蕉</option> <option value="苹果">苹果</option> <option value="橙子">橙子</option> <option value="榴莲">榴莲</option> </select> <br> 您选中的水果是{{fruits2}} <br>  <label v-for="item in origintobbies" :for="item"> <input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}} </label> <br> 您的爱好是{{hobbies}} <br>    <input type="text" v-model.lazy="message"> <br> {{message}} <br>   <input type="text" v-model.number="age"> <br> {{age}}--{{typeof age}} <br>   <input type="text " v-model.trim="name"> <br> {{name}} </div> <script> const app = new Vue({ el: "#app", data: { message: "内容", sex: '', // 当要默认选中时要填入值即可例：sex='男' agree: false, sport: [], fruits: '', fruits2: [], hobbies: [], origintobbies: ["篮球", "足球", "乒乓球", "羽毛球", "桌球"], age: 0, name: '' }, methods: { } }) </script> </body> </html> </code></pre>

分类：

前端

标签：

Vue.js

作者介绍