1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="utf-8">
6 <meta name="viewport" content="width=device-width,initial-scale=1.0">
7 <title>Document</title>
8 <!--1.导入Vue的包-->
9 <script src=" https://cdn.jsdelivr.net/npm/vue"></script>
10 <!-- <link rel="stylesheet" href="./lib/bootstrap.css"> -->
11 <link rel="stylesheet" href=" https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
12 <!-- 需要用到Jquery吗？？？不推荐在vue中使用Jquery -->
13
14 </head>
15
16 <body>
17 <div id="app">
18
19 <div class="panel panel-primary">
20 <div class="panel-heading">
21 <h3 class="panel-title">添加品牌</h3>
22 </div>
23 <div class="panel-body form-inline">
24 <label>
25 Id:
26 <input type="text" class="form-control" v-model="id">
27 </label>
28
29 <label>
30 Name:
31 <input type="text" class="form-control" v-model="name">
32 </label>
33 <!-- 在vue中，使用事件绑定机制，为元素指定处理函数的时候，如果加了小括号，就可以给函数传参了 -->
34 <input type="button" value="添加" class="btn btn-primary" @click="add()">
35
36 <label>
37 搜索名称关键字：
38 <input type="text" class="form-control" v-model="keywords">
39 </label>
40
41 </div>
42 </div>
43
44
45
46 <table class="table table-bordered table-hover table-striped">
47 <thead>
48 <tr>
49 <th>Id</th>
50 <th>Name</th>
51 <th>Ctime</th>
52 <th>Operation</th>
53 </tr>
54 </thead>
55 <tbody>
56 <!-- 之前，v-for中的数据，都是直接从data上的list中直接渲染过来的 -->
57 <!-- 现在，我们自定义了一个方法，同时，把所有的关键字，通过传参的形式，传递给了search方法 -->
58 <!-- 在search方法内部，通过执行for循环，把所有符合搜索关键字的数据，保存到一个新数组中，返回 -->
59 <tr v-for="item in search(keywords)" :key="item.id">
60 <td>{{item.id}}</td>
61 <td v-text="item.name"></td>
62 <td>{{ item.ctime | dateFormat()}}</td>
63 <td>
64 <a href="" @click.prevent="del(item.id)">删除</a>
65 </td>
66 </tr>
67 </tbody>
68 </table>
69
70
71 </div>
72
73
74 <script>
75 //全局的过滤器，进行时间的格式化
76 Vue.filter('dateFormat',function(dateStr,pattern=""){
77 //根据给定的时间字符串，得到特定的时间
78 var dt = new Date(dateStr)
79
80 //yyyy-mm-dd
81 var y=dt.getFullYear()
82 var m=dt.getMonth()+1
83 var d=dt.getDate()
84
85 // return y+'-'+m+'-'+d
86 //模板字符串 ``
87 // return `${y}-${m}-${d}`
88
89 if(pattern.toLowerCase() ==='yyyy-mm-dd'){
90 return `${y}-${m}-${d}`
91 }else{
92 var hh=dt.getHours()
93 var mm=dt.getMinutes()
94 var ss=dt.getSeconds()
95
96 return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
97 }
98
99 })
100
101
102 //创建 Vue 实例，得到 ViewModel
103 var vm = new Vue({
104 el:'#app',
105 data:{
106 id:'',
107 name:'',
108 keywords:'',//搜索的关键字
109 list:[
110 {id:1,name:'奔驰',ctime:new Date()},
111 {id:2,name:'宝马',ctime:new Date()}
112 ]
113 },
114 methods:{
115 add(){//添加的方法
116 // console.log('ok')
117 //分析：
118 //1.获取到id 和name ，直接从data上面获取
119 //2.组织出一个对象
120 //3.把这个对下，调用数组的相关方法，添加到当前data上的list中
121 //4.注意：在Vue中，已经实现了数据的双向绑定，每当我们修改了data中的数据，Vue会默认监听到数据的改动，自动把最新的数据，应用到页面上；
122 //5.当我们意识到上面的第四部的时候，就证明大家已经入门Vue了，我们更多的是在进行VM中Model数据操作，同时，在操作Model数据的时候，指定的业务逻辑操作；
123
124 var car={id:this.id,name:this.name,ctime:new Date()}
125 this.list.push(car)
126 this.id=this.name=''
127 },
128 del(id){//根据Id删除数据
129 //分析：
130 //1.如何根据Id，找到要删除这一项的索引
131 //2.如果找到索引了，直接调用数组的splice方法
132
133 /* this.list.some((item,i)=>{
134 if(item.id==id){
135 this.list.splice(i,1)
136 //在数组的some方法中，如果return true,就会立即终止这个数组的后续循环
137 return true;
138 }
139 })*/
140
141 var index = this.list.findIndex(item=>{
142 if(item.id==id){
143 return true;
144 }
145 })
146 // console.log(index)
147 this.list.splice(index,1)
148 },
149
150 search(keywords){//根据关键字，进行数据的搜索
151 /* var newList=[]
152 this.list.forEach(item=>{
153 if(item.name.indexOf(keywords)!=-1){
154 newList.push(item)
155 }
156 })
157 return newList*/
158 //注意：forEach some filter findIndex 这些都属于数组的新方法，
159 //都会对数组中的每一项，进行遍历，执行相关操作；
160 return this.list.filter(item=>{
161 // if(item.name.indexOf(keywords)!=-1)
162 //注意：在ES6中，为字符串提供了一个新方法，叫做String.prototype.includes('要包含的字符串')
163 //如果包含，则返回true，否则返回false
164 //contains
165 if(item.name.includes(keywords)){
166 return item
167 }
168 })
169 }
170 }
171 });
172
173 //过滤器的定义语法
174 // Vue.filter('过滤器的名称',function(){ })
175 //过滤器中的function，第一个参数，已经被规定死了，永远都是过滤器管道符前面传递过来的数据
176 /*Vue.filter('过滤器的名称',function(data){
177 return data+'123'
178 })*/
179 </script>
180 </body>
181 </html>
182
183
184 <!-- 过滤器调用的时候的格式 {{name|过滤器的名称}} -->
185 <!-- | 名称：管道符 -->
浙公网安备 33010602011771号