day03 表单控制与购物车案例

一、表单控制

1、checkbox选中

    
    
    



    用户名：
    密码：
   
 记得密码

2、radio单选

    
    
    



    男
    女
    保密
    

您选择的性别：{{radio}}

3、多选

    
    
    



    // 因为在数据库中都是存的数字，对应该内容
    篮球
    足球
    棒球
    桌球
    

您喜欢的球类：{{many}}

二、购物车案例

1、购物车案例-结算

    
    
    



    

        

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

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

        
    

    
您选中的商品有：{{checkGroup}}
    
总价格为(由于数据的双向绑定，只要变量变了，页面也会变)：{{getPrice()}}

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

    
    
    



    
            // 加入点击事件
            
            // 绑定全选点击事件
            

        

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

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

        
    

    
您选中的商品有：{{checkGroup}}
    
总价格为(由于数据的双向绑定，只要变量变了，页面也会变)：{{getPrice()}}

3、购物车案例 - 数量加减

    
    
    
    



    

        

            

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

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

                    -
                    {{item.count}}
                    +
                
                

            
        

        
您选中的商品有：{{checkGroup}}
        
总价格为(由于数据的双向绑定，只要变量变了，页面也会变)：{{getPrice()}}


    

三、v-model进阶

1、v-model 之 lazy、number、trim

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

    
    
    



          // 回车才显示
            

        {{name}}


         // 必须以数字开头

        

        {{age}}


     // 去掉前后空格

    

    {{name}}