2018-09-12

    
    
    


 


 

     
     
{{msg}}
 
 

v-model 双向数据绑定 一般对表格类单位使用 输出结果如下图 表格中数据与下方数据绑定 是一样的

QQ截图20180912163309.png

QQ截图20180912163319.png

QQ截图20180912163328.png

    
    
    



    
{{msg}}
    点击

methods 存放函数
v-on 事件绑定 上图是点击事件 输出结果为下

QQ截图20180912170506.png

本是hello word 点击按钮后

QQ截图20180912170628.png

如上图所示变成hello 瓦罗兰大陆

    
    
    




添加按钮

    
{{value}} 删除

注:

1. 原生js中向数组中添加元素要用push,在vue中同样要用push
   2.vue实例中的方法要访问对象实例中的数据要用this
   3.删除时要注意

输出结果如下图

QQ截图20180912171524.png

QQ截图20180912171551.png

QQ截图20180912171642.png

QQ截图20180912171650.png

作业1.

    
    
    
    



    

        
姓名
        
        
年龄
        
        
邮箱
        
        提交
        重置
    
    

        

            
编号
            
姓名
            
年龄
            
邮箱
            
操作
        
        

            
{{index+1}}
            
{{value.name}}
            
{{value.year}}
            
{{value.tel}}
            
删除
        
    

输出结果如下

QQ截图20180912172054.png

作业 2.

    
    
    
    



    

        

            

                
编号
                
名称
                
单价
                
数量
                
总价
            
        
        

            

                
{{index+1}}
                
{{value.name}}
                
{{value.price}}
                

                    -
                    {{value.num}}
                    +
                
                
{{value.price*value.num}}
            
            

                

                

                

                

                
总计{{arr1}}
            
        
    

输出如下图

QQ截图20180914101959.png

任何都系都要注意细节