vue.js筛选功能（基于1.0版本）

最新推荐文章于 2024-11-10 19:57:02 发布

原创最新推荐文章于 2024-11-10 19:57:02 发布 · 609 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个使用Vue实现的基本表格应用案例，包括数据的添加、删除及通过输入框进行内容筛选的功能。通过实例代码展示了如何利用Vue的响应式原理完成这些交互。

<!DOCTYPE html>
<html lang="zh">

   <head>
       <meta charset="UTF-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <meta http-equiv="X-UA-Compatible" content="ie=edge" />
       <title>Document</title>

<table id="tb">
               <tr>
                   <th>编号</th>
                   <th>品牌</th>
                   <th>时间</th>
                   <th>操作</th>
               </tr>
               <tr v-show="list.length == 0">
                   <td colspan="4">当前列表无数据</td>
               </tr>
               
               <tr v-for="item in list | filterBy sname in 'name'">
                   <td>{{item.id}}</td>
                   <td>{{item.name}}</td>
                   <td>{{item.ctime}}</td>
                   <td>
                       <a href="javascript:void(0)" @click="delData(item.id)">删除</a>
                   </td>
               </tr>
           </table>
       </div>
   </body>

});
</script>

</html>

本文属于学习笔记