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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！


		  	

    
    




    
    
    


推荐阅读

           
                  
              
                  十神为偏财 八字十神中偏财的含义 
                
                   
                
              
            

                  
              
                  二战时,国际反法西斯联盟是如何形成的？ 
                
                   
                
              
            

                  
              
                  我可能是个假仙女是什么意思 
                
                   
                
              
            

                  
              
                  金融全牌照有哪些公司 
                
                   
                
              
            

                  
              
                  八字看副星还是主星,八字怎么看财星 
                
                   
                
              
            

                  
              
                  温泉养生受青睐 需注意哪些细节？ 
                
                   
                
              
            

                  
              
                  供桌的尺寸是多少 
                
                   
                
              
            

                  
              
                  疫苗百白破是预防什么 
                
                   
                
              
            

                  
              
                  历史上有没有李元霸这个人? 李元霸历史有此人吗 
                
                   
                
              
            

                  
              
                  公共娱乐场所安全疏散门开启方向 
                
                   
                
              
            

                  
              
                  钉钉APP怎么写审批？详细操作流程 
                
                   
                
              
            

                  
              
                  安卓登录两个微信,微信不建议用一部手机同时登录两微信 
                
                   
                
              
            

                  
              
                  联想YOGA900笔记本显卡坏了怎么修理 
                
                   
                
              
            

                  
              
                  鱼算不算海鲜 
                
                   
                
              
            

                  
              
                  目前油电混合动力汽车有哪些 油电混合动力汽车的种类有哪些 
                
                   
                
              
            

                  
              
                  梦见买生姜很贵是什么意思 梦见买生姜 
                
                   
                
              
            

                  
              
                  的女人在哪里取景 那些女人们 
                
                   
                
              
            

                  
              
                  宝宝秋季饮食养生注意事项 宝宝秋季饮食应该注意哪些事项 
                
                   
                
              
            

                  
              
                  金华火腿吃前怎么处理 
                
                   
                
              
            

                  
              
                  10秒内的爆笑影视片段有哪些推荐？ 
                
                   
                
              
            

          

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实现绘制中秋山间秋月和皓月当空效果