3、经过Vue基础属性作一个Table的增长、删除、姓名音位吗查询

时间 2020-05-06

标签经过 vue 基础属性一个 table 增长删除姓名音位查询繁體版

原文原文链接

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

解说：这是一段html头文件里面有vue的引用和css来控制app的宽度，table的宽度和（tr和td）行和列的样式，颜色，还有添加按钮的样式。html

 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中间实体代码有:用户名：文本框【添加】vue

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

解说：<button @click="addUser" v-bind:disabled="name=='' ">添加</button>【添加】增长点击事件addUser，当用户名文本空为空时【添加】按钮曾不可点击状态，当用户名文本框不为空时【添加】按钮可点击状态浏览器

由于Vue中的v-for 和 v-if指令不能出如今一个html语句中因此就是用了模板<template>将v-for和v-if这两个指令分开。app

<template v-for="(item,index) in list">ide

<tr v-if ="item.isShow">
this

<td>{{index}}</td>spa

<td>{{item.id}}</td>3d

</tr>

</template>

由于<a>标签使用了锚点因此使用单机事件的阻止事件即@click.prevet

<tr v-if="list.length===0"><td colspan="5">未获取到用户数据</td></tr> 若是list中的数据为0条数据即证实了table中没有数据了

 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代码

解说:el是Vue组件的id，data：Vue的数据区1list：是集合对象，2name：是字符串，3id：整型常量，4timeouter:是字符串，5method：方法体

5.1）addUser是方法体中新增用户方法，5.2）deleteUser是方法体中的删除用户方法，5.3）search是方法体中的姓名音位吗查询方法

 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尾带码

解说：body和html结束标记

1 </body>
2 </html>

View Code

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

点击添加增长4条记录

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

查找姓名有9字的记录