理解v-model及其修饰符 | 重学Vue3

这个月开始重新开始学习Vue3，从理解基本使用到模拟实现！

这是关于v-model及其修饰符。看文本篇，你将对v-model有个清晰的认识

本文目录结构如下：

image.png

v-model基本使用

此处分4点来讲：

image.png

1. 基本介绍

1.1 可以使用v-model在表单 、</code>及 <code><select></code> 元素上创建双向数据绑定</p> <p>1.2 本质是监听用户的输入事件以及更新数据，并对一些极端场景进行一些特殊处理</p> <p>1.3 注意：<code>v-model</code> 会忽略所有表单元素的<code>value</code>、<code>checked</code>、<code>selected</code>的初始值，而是总是将当前活动实例的数据作为数据来源</p> <p>1.4 <code>v-model</code>在内部为不同的输入元素使用不同的属性并抛出不同的事件：</p> <ul> <li>text 和 textarea 元素使用 value property 和 input 事件</li> <li>checkbox 和 radio 使用 checked property 和 change 事件</li> <li>select 字段将 value 作为 prop 并将 change 作为事件</li> </ul> <p><strong>2. v-model在不同input类型上的使用</strong></p> <p>2.1 在类型为文本 (Text)上的使用</p> <pre><code class="html"><template> <input type="text" v-model="name" placeholder="请输入你的名字"/> <p v-show="name">我的名字是：{{ name }}</p> </template> <script> export default { name: "App", data() { return { name: "", } } } </script> </code></pre> <p>结果如下：</p> <div class="image-package"> <div class="image-container" style="max-width: 387px; max-height: 171px;"> <div class="image-view"> </div> </div> <div class="image-caption"> 1.gif </div> </div> <p>2.2 在类型为单选框 (Radio)上的使用</p> <pre><code class="html"><template> <div> <input type="radio" value="man" v-model="picked" /> <label>男</label> </div> <div> <input type="radio" value="female" v-model="picked" /> <label>女</label> </div> <span v-show="picked">选中性别: {{ picked }}</span> </template> <script> export default { name: "App", data() { return { picked: "", }; }, }; </script> </code></pre> <p>结果如下：</p> <div class="image-package"> <div class="image-container" style="max-width: 387px; max-height: 171px;"> <div class="image-view"> </div> </div> <div class="image-caption"> 2.gif </div> </div> <p>2.3 在类型为复选框 (Checkbox)上的使用</p> <pre><code class="html"><template> <div> <label> <input type="checkbox" v-model="sex" value="male" />男 </label> <label> <input type="checkbox" v-model="sex" value="famale" />女 </label ><br /> <p v-show="sex">性取向是：{{ sex }}</p> </div> </template> <script> export default { name: "App", data() { return { sex: [], }; }, }; </script> </code></pre> <p>结果如下：</p> <div class="image-package"> <div class="image-container" style="max-width: 371px; max-height: 153px;"> <div class="image-view"> </div> </div> <div class="image-caption"> 3.gif </div> </div> <p><strong>3. v-model在textarea中的使用</strong></p> <pre><code class="html"><template> <textarea v-model="article">

我写的内容是：{{article}}

结果如下

4.gif

4. v-model在select中的使用

4.1 单选下拉列表

结果如下

5.gif

4.2 多选下拉列表

元素身上加个multiple属性，即表示多选

结果如下

6.gif

v-model的修饰符

.lazy

用于惰性更新

结果如下

7.gif

事实上它是触发了一个change事件

.number

结果如下

8.gif

number修饰符会自动将用户的输入值转为数值类型

如果这个值无法被 parseFloat() 解析，则会返回原始的值

.trim

用于除去首尾空白字符

结果如下

9.gif

以上就是v-model及其修饰符的所有内容

如有问题，欢迎留言告知，感谢~

END~

为了方便下载，我将相关的高清思维导图及源文件上传至GitHub，可移步下载：https://github.com/jCodeLife/mind-map