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 <!-- | 名称：管道符 -->