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>