附录1-品牌列表案例

效果是这样的

可以对品牌进行添加

更改状态

删除

html 

    
    
    
    
    


    

        

            
添加品牌
            

                

                    品牌名称 
                    
                
                添加品牌
            
        
        

            

                

                    
#
                    
品牌名称
                    
状态
                    
创建时间
                    
操作
                
            
            

                

                    
{{index}}
                    
{{item.name}}
                    

                        
                        已启用
                        已禁用
                    
                    
{{item.create_time}}
                    
删除
                
            
        
    

css

* {
  margin: 0px;
  padding: 0px;
}
#app {
  width: 90%;
  margin: 50px auto;
}
#app section {
  border: 3px solid #f3f2f3;
}
#app section p {
  padding: 10px 20px;
  background-color: #f8f6f8;
}
#app section div {
  margin-left: 20px;
  height: 50px;
  line-height: 50px;
}
#app section div div {
  display: inline-block;
  height: 28px;
  line-height: 28px;
  border: 3px solid #f9faf9;
  border-radius: 8px;
}
#app section div div span {
  padding: 5px 10px;
  background-color: #e9ebea;
}
#app section div div input {
  text-indent: 10px;
  height: 30px;
  border: 1px solid transparent;
  outline: none;
}
#app section div button {
  height: 30px;
  background-color: #0076ff;
  color: white;
  border: 1px solid transparent;
  padding: 5px 10px;
  border-radius: 5px;
  margin-left: 10px;
  cursor: pointer;
}
#app table {
  width: 100%;
  margin-top: 20px;
  border-collapse: collapse;
}
#app table td {
  border: 2px solid #f9faf9;
}