Vue实现搜索 和新闻列表功能简单范例

效果图如下所示：

  
   






 
   .box {
    width: 900px;
    height: auto;
    overflow: hidden;
    margin: 30px auto;
   }
   .left {
    height: 150px;
    width: 185px;
    padding: 5px;
    display: inline-block;
    border: 1px solid black;
   }
   .left input {
    padding: 2px;
    margin-top: 10px;
   }
   .right {
    width: 600px;
    height: auto;
    display: inline-block;
    margin-left: 30px;
    vertical-align: top;
   }
   .right table {
    border-collapse: collapse;
    width: 580px;
   }
   .right table th {
    background-color: green;
    padding: 5px;
    text-align: center;
    border: 1px solid black;
    color: #FFFFFF;
   }
   .right table tr {
    text-align: center;
   }
   .right table td {
    border: 1px solid black;
   }
  



   
    
     
     

     
     
    
    
     

      

编号
品牌名称
创建时间
操作
      
      

{{item.id}}
{{item.name}}
{{item.time | datefmt('yyyy-mm-dd HH:mm:ss')}}

 删除

      
     
    
   
  
  

总结

以上所述是小编给大家介绍的Vue实现搜索 和新闻列表功能简单范例，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持！