Vue|Vue v-model实现案例介绍 Vuev-model实现案例介绍

1. 概述
2. 使用方法
3. 案例

3.1 用户登录
3.2 todolist
3.3 实现单个复选框
3.4 实现多个复选框
3.5 实现复选框全选
3.6 单选和下拉

4. v-model修饰符

4.1 lazy
4.2 trim
4.3 number

5. 案例

5.1 购物车
5.2 购物车持久化

1. 概述 v-model 是 Vue 提供的一个语法糖，它是 value 值和事件的结合体，它会根据不同的表单项，来选择执行不同的事件。它的作用是，通过和表单元素绑定，实现双向数据绑定，通过表单项可以更改数据。
另外，v-model 还可以用于各种不同类型的输入，

</code>、<code></code> 元素。它会根据所使用的元素自动使用对应的 DOM 属性和事件组合：<br />
 
 <ul> 
<li>文本类型的 <code><input></code> 和 <code><textarea></code> 元素会绑定 <code>value</code> property 并侦听 <code>input</code> 事件；</li> 
<li><code><input type="checkbox"></code> 和 <code><input type="radio"></code> 会绑定 <code>checked</code> property 并侦听 <code>change</code> 事件；</li> 
<li><code></code> 会绑定 <code>value</code> property 并侦听 <code>change</code> 事件</li> 
 </ul> 
 v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值，而总是将 Vue 实例的数据作为数据来源，应该在 data 选项中声明初始值。<br />
 
 语法糖：这种语法对语言的功能并没有影响，但是更方便程序员使用<br />
 
 <br />
 
 2. 使用方法 
 <strong>【Vue|Vue v-model实现案例介绍】</strong>在没有使用v-model指令时，我们通过data数据控制表单项中的值，还是麻烦的，需要绑定属性和事件来完成。<br />
 <blockquote><input type="text" :value="https://www.it610.com/article/username" @input="setUsername"></blockquote><br />
  <img alt="Vue|Vue v-model实现案例介绍"
onload="javascript:ImgReSize(this)" src="http://img.readke.com/220909/110J51239-0.jpg"/> <br />
文章图片 <br />
<br />
 
 使用 v-model 指令实现上述效果：<br />
 <blockquote><input type="text" v-model="username"></blockquote><br />
  <img alt="Vue|Vue v-model实现案例介绍"
onload="javascript:ImgReSize(this)" src="http://img.readke.com/220909/110J5H30-1.jpg"/> <br />
文章图片 <br />
<br />
 
 <br />
 
 3. 案例 
 <br />
 
 3.1 用户登录<br />
 
 使用 v-model 指令，可以很轻松的获取表单中的数据，也可以很轻松地对数据进行修改。<br />
 <blockquote><!DOCTYPE html><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>vue学习使用</title><body><label>账号：<input type="text" v-model="username"></label><label>密码：<input type="text" v-model="password"></label><textarea v-model="intro">

   

文章图片 



 
 注意：多行文本框中使用插值表达式 无效

 
 

 
 3.2 todolist

 vue学习使用无任务
{{item.title}}删除


   

文章图片 



 
 

 
 3.3 实现单个复选框

 
 当单个复选框被选中或者被取消选中时，我们如何获取到该复选框是否被选中的信息？

 
 我们可以通过绑定事件来获取：

 vue学习使用


   

文章图片 



 
 注意：在绑定事件时，click事件可以用，但它是的状态会太过提前，所以用onchange事件，改变后再来获取。

 
 更简单的方式是，通过 v-model 指令来获取：

 vue学习使用


   

文章图片 



 
 注意：单个复选框，在数据源中定义的数据类型为布尔类型：true 选中，false未选中

 
 

 
 3.4 实现多个复选框

 vue学习使用html
css
js
{{lessons}}


   

文章图片 



 
 注意：多个复选框，数据源中定义的数据类型为数组，标签中需要指定它的value值。

 
 

 
 3.5 实现复选框全选

 vue学习使用html
css
js
{{lessons}}


   

文章图片 



 
 

 
 3.6 单选和下拉

 vue学习使用{{sex}} -- {{city}}

建行招行


   

文章图片 



 
 注意：单选框和复选框都需要 input 标签提供 value 属性。

 
 

 
 4. v-model修饰符 
 

 
 4.1 lazy

 
 作用：延时更新数据源中的数据，失去焦点时触发更新。

 


   

文章图片 



 
 

 
 4.2 trim

 
 作用：自动过滤用户输入的首尾空白字符。

 


   

文章图片 



 
 

 
 4.3 number

 
 作用：输入值转为数值类型。

 += {{n1+n2}}


   

文章图片 



 
 

 
 5. 案例 
 

 
 5.1 购物车

 vue学习使用序号 名称 单价 数量 操作
{{index+1}} {{item.name}} {{item.price}} 
合计：{{totalPrice()}}



   

文章图片 



 
 

 
 5.2 购物车持久化

 vue学习使用序号 名称 单价 数量 操作
{{index+1}} {{item.name}} {{item.price}} 
合计：{{totalPrice()}}



   

文章图片 



 
 到此这篇关于Vue v-model实现案例介绍的文章就介绍到这了,更多相关Vue v-model内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！


		  	

    
    




    
    
    


推荐阅读

           
                  
              
                  Docker容器下快速搭建Hyperf框架在Windows系统的本地开发环境 
                
                   
                
              
            

                  
              
                  u盘启动快捷键u盘启动快捷键 
                
                   
                
              
            

                  
              
                  吃了止痛药能打新冠疫苗吗 
                
                   
                
              
            

                  
              
                  FGO魔伊复刻流程攻略 魔法少女纪行复刻活动流程推荐 
                
                   
                
              
            

                  
              
                  随性写的 
                
                   
                
              
            

                  
              
                  高三学生经商有前途吗？ 
                
                   
                
              
            

                  
              
                  让你的打印机重获新生 益普生打印机废墨清零软件下载 
                
                   
                
              
            

                  
              
                  3000元价位手机怎么选好 3000元价位手机怎么选 
                
                   
                
              
            

                  
              
                  安乐什么意思 安乐是什么意思 
                
                   
                
              
            

                  
              
                  王者荣耀狂铁所有皮肤 王者荣耀狂铁战令皮肤怎么样 
                
                   
                
              
            

                  
              
                  代理服务器出了什么问题？ 代理服务器不能怎么回事 
                
                   
                
              
            

                  
              
                  纵向沟通与横向沟通有何不同 横向沟通与纵向沟通各有哪些优缺点 
                
                   
                
              
            

                  
              
                  吃南瓜子能减肥吗 
                
                   
                
              
            

                  
              
                  圆的面积和底面积一样吗? 圆的面积和底面积一样吗 
                
                   
                
              
            

                  
              
                  手机cpu怎么设置最佳性能 
                
                   
                
              
            

                  
              
                  宫腔镜|不知道宫腔镜有何优势？给你列出这3点，可别小瞧了 
                
                   
                
              
            

                  
              
                  急脾气的妈妈怎么对待慢性子的孩子 
                
                   
                
              
            

                  
              
                  粉扑拿回来要洗吗 粉扑用完怎么放置 
                
                   
                
              
            

                  
              
                  的哥马上要交班，却闯祸又丢工作 
                
                   
                
              
            

                  
              
                  mysql查询前三名 mysql查询第三到第五 
                
                   
                
              
            

          

Flutter学习LogUtil封装与实现实例详解 
 ios利用RunLoop原理实现去监控卡顿实例详解 
 vue清空form对象的方法 
 Vue响应式原理模拟实现原理探究 
 web|web -- js 实现 MQTT 连接 
 PAT|PAT Basic 1022. D进制的A+B (20)（C语言实现） 
 自然语言处理|基于中文形近字相似度与加权编辑距离融合实现的汉字纠错算法 
 YoloV5的原理与实现-开源TensorFlow版 
 C语言字符串函数|C语言字符串函数,字符函数,内存函数使用及模拟实现 
 利用Matlab实现绘制中秋山间秋月和皓月当空效果