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


		  	

    
    




    
    
    


推荐阅读

           
                  
              
                  香豆腐路边小吃做法 
                
                   
                
              
            

                  
              
                  wi-fi|一加10Pro和Moto Edge X30相比较，该如何选？ 
                
                   
                
              
            

                  
              
                  梦见自己被小蜈蚣咬 梦到小蜈蚣咬自己 
                
                   
                
              
            

                  
              
                  像池塘一样的爱情 
                
                   
                
              
            

                  
              
                  speed|迪桑特首款全掌碳板跑鞋HYPER SPEED PRO，为奔跑推进加程 
                
                   
                
              
            

                  
              
                  怎样对付老婆离家出走 媳妇回娘家怎么接回来 
                
                   
                
              
            

                  
              
                  火的歌词 火的歌曲简介 
                
                   
                
              
            

                  
              
                  7180dn驱动,兄弟7180DN清零 
                
                   
                
              
            

                  
              
                  2021年六一儿童节朋友圈文案 适合儿童节发朋友圈的句子 
                
                   
                
              
            

                  
              
                  机器人|从「狂奔」到「稳步」，看服务机器人“生存指南” 
                
                   
                
              
            

                  
              
                  穿山甲从什么时候开始有的 穿山甲距今多少年 
                
                   
                
              
            

                  
              
                  金丝楠木摸橄榄油会怎样 
                
                   
                
              
            

                  
              
                  大数据|MapReduce工作机制 
                
                   
                
              
            

                  
              
                  win10wi-fi密码在哪看（win10wi-fi密码怎么看） 
                
                   
                
              
            

                  
              
                  qq三国偏将如何直接升阶到张飞的 qq三国偏将如何直接升阶到张飞，qq三国偏将如何直接升阶到张飞技能 
                
                   
                
              
            

                  
              
                  mysql 网页用户界面 mysql操作页面长啥样 
                
                   
                
              
            

                  
              
                  聚酯纤维被子的优点 
                
                   
                
              
            

                  
              
                  莫问前程上一句是啥 莫问前程上一句介绍 
                
                   
                
              
            

                  
              
                  怪物猎人双刀配装,怪物猎人世界双剑配装推荐 
                
                   
                
              
            

                  
              
                  读书|读高质量C++/C编程指南第6章 
                
                   
                
              
            

          

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