vue购物车案例，v-model 之 lazy、number、trim，与后端交互

购物车案例

    
    
    



    
购物车
    

        

        

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

        

            
{{goods.id}}
            
{{goods.name}}
            
{{goods.price}}
            

                -
                
                +
            
            

                
            
        
        
    
            
选中的商品：{{checkGoodList}}
            
是否全选：{{checkAll}}
            
 总价格：{{getPrice()}}

v-model 之 lazy、number、trim

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

    
    
    



    
input 和v-model
    

    
v-model修饰符：lazy、number、trim
    --->{{s1}}
    

    --->{{s2}}
    

    --->{{s3}}

与后端交互

# 1 使用jq的ajax  ===》不好---》引入了jq框架，好多功能用不到
# 2 原生js  fetch
    提供了一个 JavaScript 接口，用于访问和操纵 HTTP 管道的一些具体部分
       fetch('http://127.0.0.1:5000/userinfo')
                    .then(response => {
                        return response.json();
                    }).then(data => {
                    this.username = data.username
                    this.age = data.age
                });
# 3 axios  第三方ajax，只有ajax，没有别的，小--》底层还是基于XMLHttpRequest
      

jq发送

    
    
    
    



    
与后端交互
    加载用户信息
    
用户名：{{username}}
    
年龄：{{age}}

原生js

    
    
    
    



    
与后端交互
    加载用户信息
    
用户名：{{username}}
    
年龄：{{age}}

axios

    
    
    
    




    
与后端交互
    加载用户信息
    
用户名：{{username}}
    
年龄：{{age}}