1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title></title>
6 <link rel="stylesheet" type="text/css" href="./css/bootstrap.css" />
7 <script src="../vue.js" type="text/javascript" charset="utf-8"></script>
8 </head>
9 <body>
10 <div id="app">
11
12 <div class="panel panel-primary">
13 <div class="panel-heading">
14 <h3 class="panel-title">demo</h3>
15 </div>
16 <div class="panel-body form-inline">
17 <label>Id:
18 <input type="text" calss="from-control" v-model="id">
19 </label>
20
21 <label>Name:
22 <input type="text" calss="from-control" v-model="name" @keyup.f2="add()">
23 </label>
24
25 <input type="button" value="添加" class="btn btn-primary" @click="add">
26
27 <label>搜索名称关键字:
28 <input type="text" calss="from-control" v-model="keyword" v-focus v-color="'blue'">
29 </label>
30
31 </div>
32 </div>
33
34 <table class="table table-bordered table-hover table-striped" border="" cellspacing="" cellpadding="">
35 <thead>
36 <tr>
37 <th>Id</th>
38 <th>Name</th>
39 <th>Ctime</th>
40 <th>操作</th>
41 </tr>
42 </thead>
43 <tbody>
44 <tr v-for="item in search(keyword)" :key="item.id">
45 <td v-cloak>{{item.id}}</td>
46 <td v-text="item.name"></td>
47 <td>{{ item.ctime | dataFormat("") }}</td>
48 <td>
49 <a @click.prevent="del(item.id)">删除</a>
50 </td>
51 </tr>
52 </tbody>
53
54 </table>
55 </div>
56
57 <div id="app2">
58 <h3 v-color="'pink'" v-fontweight="'900'" v-fontsize ="'70'" >{{ msg | dataFormat2 }}</h3>
59 </div>
60
61 <script type="text/javascript">
62
63 // 自定义键盘按键 按键修饰符
64 Vue.config.keyCodes.f2 = 113;
65
66
67 // 自定义全局指令
68 Vue.directive('focus', {
69 bind: function(el) { //每当指令绑定到元素上的时候,会立即执行这个bind函数,只执行一次
70 //在每个函数中,第一个参数永远是el,表示被绑定了指令的那个元素,这个el参数,是一个原生的js对象
71 //在元素刚绑定指令的时候,还没有插入到DOM中去,这时候,调用foucs方法没有作用
72 el.focus();
73 },
74 inserted: function(el) { //表示元素插入到dom中的时候,会执行inserted函数,值触发一次
75 el.focus();
76 },
77 updated: function() { //当VNode更新的时候,会执行updated函数,可能会触发多次
78
79 }
80 });
81
82 Vue.directive('color', {
83 // bind(el, binding, vnode) {
84 // el.style.arg = binding.value.arg;
85 // },
86 bind(el, binding) {
87 el.style.color = binding.value;
88 }
89 });
90
91
92 //定义给一个全局的时间格式化 过滤器
93 Vue.filter("dataFormat", function(dataStr, pattern) {
94 var dt = new Date(dataStr);
95 var y = dt.getFullYear();
96 var m = dt.getMonth() + 1;
97 var d = dt.getDate();
98
99 if (pattern && pattern.toLowerCase() == "yyyy-mm-dd") {
100 return `${y}-${m}-${d}`;
101 } else {
102 var hh = dt.getHours();
103 var mm = dt.getMinutes();
104 var ss = dt.getSeconds();
105 return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
106 }
107
108
109 })
110
111 var vm = new Vue({
112 el: "#app",
113 data: {
114 id: "",
115 name: "",
116 key: "",
117 keyword: "",
118 list: [{
119 id: 1,
120 name: "奔驰",
121 ctime: new Date()
122 },
123 {
124 id: 2,
125 name: "宝马",
126 ctime: new Date()
127 }
128 ]
129 },
130 methods: {
131 add: function() {
132 var str = {
133 id: this.id,
134 name: this.name,
135 ctime: new Date()
136 };
137 this.list.push(str);
138 this.id = "";
139 this.name = "";
140 },
141 del: function(id) {
142
143 this.list.some(((item, i) => {
144 if (item.id == id) {
145 this.list.splice(i, 1);
146 return true;
147 }
148
149 }))
150
151 // var index = this.list.findIndex( (item) => {
152 // if(item.id == id){
153 // return true;
154 // }
155 // })
156 // console.log(index);
157 //
158 // this.list.splice(index, 1);
159 },
160 search(keyword) {
161 //var newlist = [];
162
163
164 // this.list.forEach(item=>{
165 // if(item.name.indexOf(keyword) != -1){
166 // newlist.push(item);
167 // }
168 // });
169
170 return this.list.filter(item => {
171 // if (item.name.indexOf(keyword) != -1) {
172 // newlist.push(item);
173 // }
174 if (item.name.includes(keyword)) {
175 return item;
176 }
177 })
178
179
180 //return newlist;
181 }
182 }
183 })
184
185
186
187 var vm2 = new Vue({
188 el: "#app2",
189 data: {
190 msg: new Date()
191 },
192 //自定义私有过滤器
193 filters: {
194 dataFormat2: function(dataStr, pattern) {
195 var dt = new Date(dataStr);
196 var y = dt.getFullYear();
197 var m = dt.getMonth() + 1;
198 var d = dt.getDate();
199
200 if (pattern && pattern.toLowerCase() == "yyyy-mm-dd") {
201 return `${y}-${m}-${d}`;
202 } else {
203 var hh = dt.getHours();
204 var mm = dt.getMinutes().toString().padStart(2, "0");
205 var ss = dt.getSeconds().toString().padStart(2, "0");
206 return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
207 }
208 }
209 },
210 // 自定义私有指令
211 directives: {
212 fontweight: {
213 bind: function (el,binding){
214 el.style.fontWeight = binding.value;
215 console.log(binding.value)
216 }
217 },
218 fontsize: function(el, binding) {
219 el.style.fontSize = binding.value + "px";
220 }
221 }
222 })
223 </script>
224 </body>
225 </html>
