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字的记录