vue之事件处理、双向绑定、表单控制、v-model进阶、购物车案例

• 事件处理
  • 过滤案例
  • 事件修饰符
  • 按键修饰符
• 数据双向绑定
  • v-model的使用
• 表单控制
• v-model进阶
  • v-model 之 lazy、number、trim
• 购物车案例
  • 购物车案例 - 结算
  • 购物车案例 - 全选/全不选
  • 购物车案例 - 数量加减

事件处理

change 和 blur 最本质的区别：

如果输入框为空，失去焦点后，change不会触发，但是blur会触发

过滤案例

    
    
    



    

    

        
{{data}}
    

事件修饰符

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生

用 v-on:click.prevent.self 会阻止所有的点击
而 v-on:click.self.prevent 只会阻止对元素自身的点击

    
    
    




    

        

        

    
    
点我有你好看
    
秒杀速来!!!

按键修饰符

就是按对应的按键松开时会触发事件。例如按enter键触发事件，按q键触发事件。

注意: 在事件触发时会自动把按键对象当作参数传入

数据双向绑定

v-model的使用

实现在input框输入内容实时传给v-model绑定的变量名的值，这样就能实时获取用户输入的内容

    
    
    



    
    您输入的内容是：{{myText}}

表单控制

    
    
    




    
username: ----->{{username}}
    
password: ----->{{password}}
    
记住密码: ----->{{remember}}
    
单选: 男
    女
    其他----->{{choice_one}}
    
    
多选: 篮球
    足球
    排球----->{{choice_many}}
    

v-model进阶

v-model 之 lazy、number、trim

lazy：等待input框的数据绑定时区焦点之后再变化
number：数字开头，只保留数字，后面的字母不保留；字母开头，都保留
trim：去除首位的空格

    
    
    



    
--->{{normal}}
    
--->{{lazy}}
    
--->{{number}}
    
--->{{trim}}

购物车案例

购物车案例 - 结算

    
    
    
    



    

        

            
商品名称
            
价格
            
数量
            
选择
        
        

            
{{item.name}}
            
{{item.price}}
            
{{item.number}}
            

        
    
    
已选商品：{{checkGroup}}
    
总价：{{getPrice()}}

购物车案例 - 全选/全不选

    
    
    
    



    

        

            
商品名称
            
价格
            
数量
            
全选/全不选
        
        

            
{{item.name}}
            
{{item.price}}
            
{{item.number}}
            

        
    
    
已选商品：{{checkGroup}}
    
总价：{{getPrice()}}

购物车案例 - 数量加减

    
    
    
    



    

        

            

            

                
商品名称
                
单价
                
数量
                
全选/全不选 
            
            
            

            

                
{{item.name}}
                
{{item.price}}
                

                    -
                    {{item.number}}
                    +
                
                

            
            

                
总价：{{getPrice()}}