Vue 基础 作业

1.用户管理

div部分，用bootstrap来写

    

        

            用户名
            
        
        

            密码
            
        
        

            邮箱
            
        
        


            
            
        
    
    

        

        

            
编号
            
姓名
            
密码
            
邮箱
            
操作
        
        
        

        

            
{{index+1}}
            
{{value.uname}}
            
{{value.pass}}
            
{{value.email}}
            

                删除
            
        
        
    

JS部分

效果如下：

Image 3.png

2.购物车

div部分，用bootstrap来写

    

        

        

            
编号
            
名称
            
单价
            
数量
            
小计
        
        
        

        

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

                +
                {{value.count}}
                -
            
            
{{value.sub}}
        
        

            
总价：￥{{sum}}
        
        
    

JS部分

效果如下：

Image 5.png

3.选项卡

用v-show实现
样式

div部分

    

        
{{value.title}}
    
    

        
{{value.content}}

    

JS部分

效果如图：

Image 7.png

4.display:none和visible:hidden都能把网页上某个元素隐藏起来，但两者有区别:

display:none ---不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。

visible:hidden--- 使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。