通过搜索关键词,匹配列表
<label >
输入关键字搜索
<input type="text" class="form-control" v-model="keywords">
</label>
<tbody>
<tr v-for="item in search(keywords)" :key='item.id'>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime}}</td>
<td>
<a href="" @click.prevent='del(item.id)'>删除</a>
</td>
</tr>
</tbody>
//forEach,some,filter,findIndex属于新数组方法
//indexOf(item) !=-1属于包含,item.name.includes(),也属于包含,有就返回true
//根据关键字搜索,1.使用forEach,some,filter,findIndex来遍历数组
// 2.使用indexOf(item).includes()查找包含的数组,
// 3.返回数组类型东西
search(keywords){
var newList=[];
return newList= this.list.filter(item=>{
if(item.name.includes(keywords)){
return item;
}
})
}
// 方法一
// search(keywords){
// var newList=[];
// return newList = this.list.filter(item=>{
// if(item.name.includes(keywords)){
// return item
// }
// })
// }
//方法2
// var newList=[];
// var newList= this.list.filter(item=>{
// if(item.name.indexOf(item) !=-1){
// newList.push(item)
// }
// })
// return newList;
//方法三
// var newList=[];
// this.list.forEach(item=>{
// if(item.name.indexOf(item) !=-1){
// newList.push(item);
// }
// })
// return newList;
过滤器,替换
全局:
1.新建一个 Vue.filter(‘过滤器名字’,方法)
2。标签内容里面放 | 方法名字,如下
3./帅气/g,为正则全局匹配
4.记得函数里面要放参数
<p>{{shuaiqi | bian}}</p>
</div>
</body>
<script>
Vue.filter('bian',function(shuaiqi){
return shuaiqi.replace(/帅气/g,'颜值高')
})
var ve = new Vue({
el: '#app',
data: {
id:'',
name:'',
keywords:'',
shuaiqi:'帅气的熊本熊就是帅气的我',
私有的就写在
var ve2= new Vue({
filters:
{
名称:函数}
})
填充
.padstart(数量,‘内容’)
例如 y.tostring().padstart(2,‘0’)
键盘监听,自定义修饰符
@click.enter=“add()”
按回车就生效
<p @click.f2="show">
Vue.config.keyCodes.f2 =113;
自定义指令
Vue.directive(‘名称’,{三个函数
bind:function(el){},
inserted:function(el){},
update:(){}})
和样式相关,在bind中执行
与JS有关,会在inserted中执行
生命周期
- 生命周期钩子 = 生命周期函数 = 生命周期事件
- 主要的生命周期函数分类:
- 创建期间的生命周期函数:
- beforeCreate:实例刚在内存中被创建出来,此时,还没有初始化好 data 和 methods 属性
- created:实例已经在内存中创建OK,此时 data 和 methods 已经创建OK,此时还没有开始 编译模板
- beforeMount:此时已经完成了模板的编译,但是还没有挂载到页面中
- mounted:此时,已经将编译好的模板,挂载到了页面指定的容器中显示
- 运行期间的生命周期函数:
- beforeUpdate:状态更新之前执行此函数, 此时 data 中的状态值是最新的,但是界面上显示的 数据还是旧的,因为此时还没有开始重新渲染DOM节点
- updated:实例更新完毕之后调用此函数,此时 data 中的状态值 和 界面上显示的数据,都已经完成了更新,界面已经被重新渲染好了!
- 销毁期间的生命周期函数:
- beforeDestroy:实例销毁之前调用。在这一步,实例仍然完全可用。
- destroyed:Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。