标签：ros pat get contain indexof include 括号 ase methods
案列：使用vue实现品牌的增加，删除和关键字搜索以及时间的处理
分析:手动实现筛选的方式：
<hr> 输入筛选名称： <input type="text" v-model="searchName">
<tbody> <tr v-for="item in search(searchName)"> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.ctime}}</td> <td> <a href="#" @click.prevent="del(item.id)">删除</a> </td> </tr> </tbody>
search（）{
return this.list.filter(x=>{
return x.name.indexof(name)!=-1;
});
}
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>vue实列</title> 7 <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script> 8 <!-- 引用css库 --> 9 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> 10 </head> 11 <body> 12 <div id="app"> 13 14 <div class="panel panel-preimary"> 15 <div class="panel-heading"> 16 <h3 class="panel-title">添加产品</h3> 17 </div> 18 <div class="panel-body form-inline"> 19 <label> 20 ID: 21 <input type="text" class="form-control" v-model="id"> 22 </label> 23 <label> 24 Name: 25 <input type="text" class="form-control" v-model="name"> 26 </label> 27 <!-- 在vue中使用时间绑定机制，为元素指定处理函数时候，如果我们加了小括号，就可以给函数传参 --> 28 <input type="button" value="添加" class="btn btn-primary" @click="add"> 29 <label> 30 搜索关键字： 31 <input type="text" class="from-control" v-model="keywords"> 32 </label> 33 </div> 34 </div> 35 <table class="table table-bordered table-hover table-striped"> 36 <thead> 37 <tr> 38 <th>Id</th> 39 <th>Name</th> 40 <th>CTIME</th> 41 <th>OPERATION</th> 42 </tr> 43 </thead> 44 <tbody> 45 46 <!-- 之前的-for 中的数据都是从data当中直接渲染过去的 --> 47 <!-- 现在我们，自定义一个search方法，同时我们把所有的关键字，通过传参的形式传递给search --> 48 <!-- 在search中我们通过执行for循环把所有符合的关键字保存在一个新的数组中 --> 49 50 <tr v-for="item in search(keywords)" :key="item.id"> 51 <td>{{ item.id }}</td> 52 <td v-text="item.name"></td> 53 <td>{{ item.ctime | dateFormat(‘yyyy-MM-dd‘)}}</td> 54 <td> 55 <a href="" @click.prevent="del(item.id)">删除</a> 56 </td> 57 </tr> 58 </tbody> 59 </table> 60 </div> 61 62 63 <script> 64 65 Vue.filter(‘dateFormat‘,function (dateStr,pattern=‘‘) { 66 //根据字符串获取特定时间 67 var dt = new Date(dateStr) 68 //yyy-mm-dd 69 var y = dt.getFullYear() 70 71 var m = dt.getMonth()+1 72 73 var d = dt.getDate() 74 if(pattern && pattern.toLowerCase() == ‘yyy-mm-dd‘){ 75 return ‘${y}-${m}-${d}‘ 76 }else{ 77 var hh = dt.getHours() 78 //padStart:开始填充；padEnd()：末尾填充（如两位填充数字1：01和10） 79 var mm = (dt.getMinutes()).toString().padStart(2,‘0‘) 80 var ss = (dt.getSeconds()).toString().padStart(2,‘0‘) 81 return ‘${y}-${m}-${d} ${hh}:${mm}:${ss}‘ 82 } 83 }) 84 85 var vm = new Vue({ 86 el:"#app", 87 data :{ 88 dt:new Date(), 89 id:null, 90 name:null, 91 keywords:‘‘, 92 list:[ 93 { id: 1, name: ‘蛋挞‘, ctime: new Date() }, 94 { id: 2, name: ‘奶茶‘, ctime: new Date() } 95 96 ] 97 98 }, 99 methods:{ 100 101 102 103 add(){ 104 //console.log(‘ok‘) 105 //分析 106 //1.获取到id与name直接从data中获取 107 //2.组织出一个对象 108 //3.把这个对象，调用数组的方法， 添加到当前list中 109 //4.在vue中我们已经实现了数据的双向绑定通过v-model每当我们修改data中的数据的时候我们vue会默认监听会默认监听到数据的改动，自动把最新的数据，应用到页面上 110 //5.在vue中我们更多的是在进行 VM中 Model 数据的操作，同时，在操作Model数据的时候，指定的业务逻辑操作； 111 112 113 var food = { id: this.id, name: this.name, ctime: new Date()} 114 115 this.list.push(food); 116 this.id = this.name =‘‘; 117 }, 118 del(id){ 119 //我们根据ID进行数据的删除 120 //1.我们根据Id找到我们要删除项的索引 121 //2.如果我们找到了索引就开始调用数组的splice的方法 122 123 /* this.list.some((item,i) => { 124 if(item.id == id){ 125 this.list.splice(i,1) 126 //在数组some方法中如果reyurn true，就会立即终止这个数组的后续循环 127 return true; 128 } 129 130 }) */ 131 132 133 var index = this.list.findIndex(item=>{ 134 if(item.id == id){ 135 return true; 136 } 137 }) 138 //console.log(index) 139 this.list.splice(index,1) 140 }, 141 search(keywords){ 142 143 /* var newlist = [] 144 this.list.forEach(item=>{ 145 if(item.name.indexof(keywords)!=-1){ 146 newList.push(item) 147 } 148 }) 149 return newList(item)*/ 150 151 //注意： forEach some filter findIndex 这些都属于数组的新方法， 152 //都会对数组每一项进行遍历执行相关操作 153 return this.list.filter(item =>{ 154 // if(item.name.indexOf(keywords) != -1) 155 156 // 注意 ： ES6中，为字符串提供了一个新方法，叫做 String.prototype.includes(‘要包含的字符串‘) 157 // 如果包含，则返回 true ，否则返回 false 158 // contain 159 if (item.name.includes(keywords)) { 160 return item 161 } 162 }) 163 //return newList 164 165 } 166 }, 167 filters: { // 定义私有过滤器 过滤器有两个 条件 【过滤器名称 和 处理函数】 168 // 过滤器调用的时候，采用的是就近原则，如果私有过滤器和全局过滤器名称一致了，这时候 优先调用私有过滤器 169 dateFormat: function (dateStr, pattern = ‘‘) { 170 // 根据给定的时间字符串，得到特定的时间 171 var dt = new Date(dateStr) 172 return dateStr 173 }, 174 175 } 176 }) 177 </script> 178 </body> 179 </html>
标签：ros pat get contain indexof include 括号 ase methods
原文地址：https://www.cnblogs.com/yangyunhao/p/12562444.html
