三、通过Vue基础属性做一个Table的增加、删除、姓名音位吗查询

html头文件包括css，和vue.js的文件的引用

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>Document</title>
 7     <script src="https://vuejs.org/js/vue.min.js"></script>
 8     <style>
 9         #app {
10             width: 800px;
11             margin: 10px auto;
12         }
13         .tb {
14             border-collapse: collapse;
15             width: 100%;
16         }
17         .tb th {
18             background-color: cornflowerblue;
19             color: white
20         }
21         .tb td,
22         .tb th {
23             padding: 5px;
24             border: 1px solid #000;
25             text-align: center;
26         }
27         .add {
28             padding: 5px;
29             border: 1px solid #000;
30             margin-bottom: 10px;
31         }
32     </style>
33 </head>
34 <body>

View Code

html中间实体代码有:用户名：文本框【添加】

用户名：【请输入要搜索的用户名】

 1 <div id="app">
 2         <div class="add">
 3             用户名：
 4             <input type="text" v-model="name">
 5             <button @click="addUser" :disabled="name==''" >添加</button>
 6         </div>
 7         <div class="add">
 8             用户名：
 9             <input type="text" placeholder="请输入要搜索的姓名" @input="search($event)">
10         </div>
11         <div>
12             <table class="tb">
13                 <tr>
14                     <th>索引</th>
15                     <th>编号</th>
16                     <th>用户名</th>
17                     <th>创建时间</th>
18                     <th>操作</th>
19                 </tr>
20                 <template v-for="(item,index) in list">
21                     <tr v-if="item.isShow">
22                         <td>{{index}}</td>
23                         <td>{{item.id}}</td>
24                         <td>{{item.name}}</td>
25                         <td>{{item.date}}</td>
26                         <td>
27                             <a href="#" @click.prevent="deleteUser(index)">删除</a>
28                         </td>
29                     </tr>
30                 </template>
31                 <tr v-if="list.length===0">
32                     <td colspan="6">未获取到用户数据</td>
33                 </tr>
34             </table>
35         </div>
36     </div>

View Code

javaScript代码即也是vue代码

 1 <script>
 2         var vm = new Vue({
 3             el: "#app",
 4             data: {
 5                 list: [
 6                     {
 7                         id: 1,
 8                         name: "Synjones",
 9                         date: new Date(),
10                         isShow: true,
11                         isChecked: false
12                     },
13                     {
14                         id: 2,
15                         name: "Weilai2570019",
16                         date: new Date(),
17                         isShow: true,
18                         isChecked: false
19                     },
20                     {
21                         id: 3,
22                         name: "Xingfuyijiaren",
23                         date: new Date(),
24                         isShow: true,
25                         isChecked: false
26                     },
27                 ],
28                 name: '',
29                 id: 4,
30                 timeouter: null
31             },
32             methods: {
33                 addUser() {
34                     if (this.name != "") {
35                         this.list.push({
36                             id: this.id++,
37                             name: this.name,
38                             date: new Date(),
39                             isShow: true,
40                             isChecked: false
41                         })
42                         this.name = '';
43                     }
44                 },
45                 deleteUser(index) {
46                     if (confirm("是否确认删除")) {
47                         this.list.splice(index, 1);
48                     }
49                 },
50                 search(e) {
51                     clearTimeout(this.timeouter);
52                     this.timeouter = setTimeout(() =>{
53                         this.list.forEach(m => m.isShow = true);
54                         var searchText = e.target.value.toUpperCase();
55                         var filterList = this.list.filter(m => !m.name.toUpperCase().includes(searchText));
56                         filterList.forEach(element => {
57                             element.isShow = false;
58                         });
59                     }, 500)
60                 }
61             },
62         });
63     </script>

View Code

html尾带码

1 </body>
2 </html>

View Code

在ie浏览器中初始图片如下图

点击添加增加4条记录

删除用户名9，10两条记录

查找姓名有9字的记录

三、通过Vue基础属性做一个Table的增加、删除、姓名音位吗查询

猜你喜欢