Vue之表单与v-model

野性酷女 2023-06-08 03:12 105阅读 0赞

**Vue之表单与v-model小编分为五个部分：如下**  
（1）v-model基本用法  
（2）单选框/按钮  
（3）复选框/多选按钮  
（4）下拉选择列表  
（5）表单输入绑定修饰符

## v-model基本用法 ##

*  表单控件在实际业务较为常见，比如单选、多选、下拉选择、输入框等，用它们可以完成数据的录入、校0验、提交等。 Vue 提供了 v-model指令，用于在表单类元素上双向绑定数据。
 *  例如在输入框上使用时，输入的内容会实时映射到绑定的数据上。
 *  在输入框输入的同时，｛ \{ message \} ｝也会实时将内容渲染在视图中。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70]
 *  对于文本域 textarea 也是同样的用法  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 1]

## 注意事项 ##

*  **注意：**
 *  ①使用 v-model 后，表单控件显示的值只依赖**所绑定的数据**，不再关心初始化时的 value属性\*\*（解耦初始化value属性）\*\*  
    ![在这里插入图片描述][20191015195822482.png]
 *  ②对于< textarea> 之间插入的值，不会生效\*\*（覆盖文本域）\*\*  
    ![在这里插入图片描述][20191015195911449.png]
 *  ③使用 v-model 时，如果是用中文输入法输入中文，一般在没有选定饲组前，也就是在拼音阶段， Vue 是不会更新数据的，当敲下汉字时才会触发更新。如果希望总是实时更新，可以用＠input 来替代 v-model ，只不过v-model会在不同的表单上进行智能处理。
 *  下图案例分析：
 *  此时没有v-model指令，所以默认初始值可以正常显示，不会被覆盖。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 2]

## 单选框/按钮 ##

**（1）单独使用**

*  单选按钮在单独使用时，官方文档标明不需要 v-model ，可以直接使用 v-bind 绑定布尔类型为真选中，为否时不选。  
    但不推荐使用v-bind进行绑定，建议用 v-model 配合 value 使用。
 *  如下图v-bind和v-model 配合 value的案例：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 3]  
    **（2）组合使用**
 *  如果是组合使用来实现互斥选择效果。
 *  数据 profession值与单选按钮的 value 值一致时，就会选中该项。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 4]

## 复选框/多选按钮 ##

*  复选框也分单独使用和组合使用，不过用法稍与单选不同。  
    **（1）单独使用**
 *  复选框单独使用时，是用 v-model来绑定一个布尔值。（注意：虽然v-bind绑定后的效果也一样，但只是效果一样，数据并未发生改动）  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 5]
 *  因为v-bind绑定单个多选按钮无法实现数据驱动，所以单独使用复选框时，语法指令为v-model  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 6]
 *  对上面案例进行修改调整
 *  此时在勾选时，数据status值变为了true, label 渲染的内容也会更新。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 7]  
    **（2）组合使用**
 *  组合使用时，也是v-model与value  
    一起，多个勾选框都绑定到同一个数组类型的数据，value的值在数组当中，就会选中这一项。这一过程是双向的，在勾选时value 的值也会自动 push这个数组中，示例代码如下  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 8]

## Vue实现全选与全不选1 ##

*  利用vue的双向数据绑定v-model命令，当勾选时，checkbox的value值会自动push到所绑定的数组checkData中去，即结合value和v-model。  
    （复制个全代码，偷个懒，嘿嘿）吃喝睡全选，哈哈哈

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script src="../js/vue-2.6.9.min.js" type="text/javascript" charset="utf-8"></script>
    	</head>
    	<body>
    		<div class="demo">
    			<p>全选：<input type="checkbox" @click="selectAll" v-model="allStatus" /></p>
    			<label v-for="like of likes">
    				{
       {like.name}}
    				<input type="checkbox" name="like" v-model="likeList" :value="like.value" />
    			</label>
    		</div>
    	</body>
    	<script type="text/javascript">
    		var demo = new Vue({
    			el: '.demo',
    			/* 绑定数据 */
    			data: {
    				likes: [{
    						name: '吃',
    						value: 'chi'
    					},
    					{
    						name: '喝',
    						value: 'he'
    					},
    					{
    						name: '睡',
    						value: 'shui'
    					}
    				],
    				likeList: [],
    				allStatus: false
    			},
    			/* 方法 */
    			methods: {
    				selectAll() {
    				//统一this指向，让this指向Vue
    					var _this = this
    					if (!_this.allStatus) {
    						_this.likes.forEach(function(item, index, self) {
    							_this.likeList.push(item.value)
    						})
    					} else {
    						_this.likeList = []
    					}
    
    				}
    			},
    			/* 计算属性 */
    			computed: {
    
    			}
    		})
    	</script>
    </html>

## Vue实现全选与全不选2 ##

*  可以通过vue对input的特殊方式v-model来实现对应数据的绑定，同样也可以通过这种方式实现购物车全选与全不选的效果。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 9]

## 下拉选择列表 ##

*  选择列表就是下拉选择器，也是常见的表单控件，同样也分为单选和多选两种方式。
 *  单选：
 *  是备选项，如果含有 value 属性 v-model 就会 先匹配 value。如果没有就会直接匹配的 text。比如选中第二项时 selected 的值是 js 而不是 JavaScript

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 10]

*  多选：
 *  给添加属性 multiple 就可以多选了， 此时v-model  
    绑定的是一个数组。与复选框用法类似，多选：按住Ctrl+点击即可。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 11]

## 动态下拉选择列表 ##

*  在业务中，经常用 v-for 动态输出，value和text 也是用 v-bind 来动态输出的。例如：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 12]
 *  虽然用选择列表控件可以很简单地完成下拉选择的需求，但是在实际业务中反而不常用。
 *  因为它的样式依赖平台和浏览器，无法统一，不太美观，功能受限，如不支持搜索。
 *  常见的解决方案是用 div或ul 模拟个类似的控件。

## 表单输入绑定修饰符 ##

**（1）.lazy延迟修饰符**

*  在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 13]  
    **（2）.number数字修饰符**
 *  这通常很有用，因为即使在 type=“number” 时，HTML 输入元素的值也总会返回字符串。如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 14]  
    **（3）过滤空白修饰符**
 *  给 v-model 添加 trim 修饰符，可以自动过滤用户输入的首尾空白字符  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 15]  
    以上就是**Vue之表单与v-model**的所有内容，如有问题留言小编，嘿嘿…

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70]: /images/20230531/e7f658afdb55454a9a4f47dfe8e7fca4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 1]: /images/20230531/037240d62a6942dfa67df14f5c871fc9.png
[20191015195822482.png]: /images/20230531/80900d4e37b546dbb4b5ba039d8e9557.png
[20191015195911449.png]: /images/20230531/50ceedfc8e1f4fee9f081a84fd05a439.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 2]: /images/20230531/32a87c82458344e19803faed9798b8e6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 3]: /images/20230531/e1e377ad94fd46449725f83975ef9b9a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 4]: /images/20230531/66382606bd194b6ebc444fed915b119c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 5]: /images/20230531/122b381d48574d27943d8a2e09a09c30.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 6]: /images/20230531/901b12bd297c495381159aea99cf2b7e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 7]: /images/20230531/a786cffd8c8d442980107424ae605a24.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 8]: /images/20230531/a38f89baa42e4182b47cdd28a80876b4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 9]: /images/20230531/156363378967487b98de6252b8eed6ab.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 10]: /images/20230531/398bf67ebe1f42abaabf03bf0f14944c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 11]: /images/20230531/92036dfbac5e4707975e48be9243d2a4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 12]: /images/20230531/7cf8e1b14b61405ba4f6516963471c4a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 13]: /images/20230531/d07f010fcb484ff8b2fe5a1fdc8e0187.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 14]: /images/20230531/4609b1ba2fff44d19782d49abd15e88b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 15]: /images/20230531/148e2cf404b94c8390d6f7b05254cb62.png