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>