/
012-品牌列表实例.html
222 lines (209 loc) · 8.55 KB
/
012-品牌列表实例.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
<!DOCTYPE html>
<!--
根据关键字实现数组的过滤
Vue中全局过滤器
定义格式化时间的全局过滤器
定义私有过滤器
字符串padStart方法的使用
默认按键修饰符
.enter .tab .delete .esc .space .up .down .left .right 以及按键码keyCode
自定义按键修饰符
自定义全局指令
定义私有指令
vue的生命周期
beforeCreate、created、beforeMount、mounted、updated、beforeDestroy、destroy
-->
<html>
<head>
<meta charset='utf-8'>
<title></title>
<!-- 引入vue.js -->
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div id='app'>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">添加品牌</h3>
</div>
<div class="panel-body form-inline">
<label>Id:
<input type="text" class="form-control" v-model="id">
</label>
<label>Name:
<input type="text" class="form-control" v-model="name" @keyup.enter="add" @keyup.f2="add">
</label>
<input type="button" value="添加" class="btn btn-primary" @click="add">
<hr>
<label>搜索名称关键字:
<input type="text" class="form-control" v-focus v-color="'blue'" v-model="keywords">
</label>
</div>
</div>
<!-- 表格 -->
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Ctime</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<tr v-for="item in search(keywords)" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime | dataFormat}}</td>
<td>
<a href="" @click.prevent="del(item.id)">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<div id="app2">
<h2 v-color="'pink'" v-fontweight="'800'" v-fontsize="'50'">你好啊</h2>
</div>
</body>
<script>
// 定义全局过滤器
// Vue.filter('过滤器名称',function(){})
Vue.filter('dataFormat',function(datastr,pattern=''){
let data = new Date(datastr)
let year = data.getFullYear()
let month = data.getMonth() + 1;
let day = data.getDate()
let hour = data.getHours()
let minute = data.getMinutes()
let second = data.getSeconds()
// return year + '-' + month + '-' + day
if(pattern.toLowerCase() === 'yyyy-mm-dd'){
return `${year}-${month}-${day}`
}else{
return `${year}-${month}-${day} ${hour}:${minute}:${second}`
}
})
// 自定义全局按键修饰符
// Vue.config.keyCodes.自定义名称 = keyCode码
Vue.config.keyCodes.f2 = 113
// 自定义全局指令
//
Vue.directive('focus',{
bind:function(el){
// 在每个函数中，第一个参数永远是el，表示被绑定了指令的那个元素，这个el参数是一个原生的JS对象
// el.focus() 该操作不生效，时机不对
}, //每当指令绑定到元素上的时候，会立刻执行这个 bind 函数，智慧执行一次
inserted:function(el){
el.focus()
}, //inserted表示元素 插入到DOM中的时候，会执行 inserted 函数【触发一次】
updated:function(){}, //当VNode（组件）更新的时候，会执行 updated ，可能会触发多次
})
Vue.directive('color',{
bind:function(el,binding){
console.log(binding)
el.style.color = binding.value
}, //每当指令绑定到元素上的时候，会立刻执行这个 bind 函数，智慧执行一次
})
// 实例化vue对象
let vm = new Vue({
// 绑定对象
el:'#app',
data:{
id:'',
name:'',
keywords:'',
list:[
{id:1,name:'奔驰',ctime:new Date()},
{id:2,name:'宝马',ctime:new Date()}
]
},
methods:{
add(){ //添加方法
console.log("添加方法")
// 判断有没有输入
if(this.id=='' || this.name==''){
alert("输入不完整")
return
}
// 添加到list
this.list.push({id:this.id,name:this.name,ctime:new Date()})
// 恢复初始值
this.id = ''
this.name =''
},
del(id){
console.log("删除方法")
// console.log(id)
// this.list.some((item,i)=>{
// if(item.id == id){
// this.list.splice(i,1)
// // 在数组的some方法中，如果return true就会立即停止后续循环
// return true
// }
// })
let index = this.list.findIndex(item=>{
if(item.id == id){
return true
}
})
this.list.splice(index,1)
},
search(keywords){
// let newList = []
// this.list.forEach(item=>{
// if(item.name.indexOf(keywords) != -1){
// newList.push(item)
// }
// })
// return newList
let newList = this.list.filter(item=>{
// if(item.name.indexOf(keywords) != -1){}
if(item.name.includes(keywords)){
return true
}
})
return newList
}
},
// 私有（局部）过滤器——过滤器有两个条件-【过滤器名称和处理函数】
// 过滤器调用的原则为就近原则
filters:{
//
dataFormat:function(datastr,pattern=''){
let data = new Date(datastr)
let year = data.getFullYear()
let month = (data.getMonth() + 1).toString().padStart(2,'0')
let day = data.getDate().toString().padStart(2,'0')
let hour = data.getHours().toString().padStart(2,'0')
let minute = data.getMinutes().toString().padStart(2,'0')
let second = data.getSeconds().toString().padStart(2,'0')
// return year + '-' + month + '-' + day
if(pattern.toLowerCase() === 'yyyy-mm-dd'){
return `${year}-${month}-${day}`
}else{
return `${year}-${month}-${day} ${hour}:${minute}:${second}`
}
}
}
})
let vm2 = new Vue({
el:'#app2',
data:{},
directives:{
// 设置字体加粗
'fontweight':{
bind:function(el,binding){
el.style.fontWeight = binding.value
}
},
// 设置字体大小
'fontsize':function(el,binding){
el.style.fontSize = binding.value +'px'
}
}
})
</script>
</html>