本文标识 : V00007
本文编辑 : Jack 风 编程工具 : Vscode 阅读时长 : 4分钟
添加新品牌
删除品牌 根据条件 筛选品牌
1.x 版本中的filterBy指令,在2.x中已经被废除:
filterBy - 指令
<tr v-for="item in list | filterBy searchName in 'name'">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime}}</td>
<td>
<a href="#" @click.prevent="del(item.id)">删除</a>
</td>
</tr>
在2.x版本中手动实现筛选的方式:
筛选框绑定到 VM 实例中的 searchName 属性:
<hr> 输入筛选名称:
<input type="text" v-model="searchName">
在使用 v-for 指令循环每一行数据的时候,不再直接 item in list,而是 in 一个 过滤的methods 方法,同时,把过滤条件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
过滤方法中,使用 数组的 filter
方法进行过滤:生命周期介绍
## [vue实例的生命周期](https://cn.vuejs.org/v2/guide/instance.html#实例生命周期) - 什么是生命周期:从Vue实例创建、运行、到销毁期间,总是伴随着各种各样的事件,这些事件,统称为生命周期! - [生命周期钩子](https://cn.vuejs.org/v2/api/#选项-生命周期钩子):就是生命周期事件的别名而已; - 生命周期钩子 = 生命周期函数 = 生命周期事件 - 主要的生命周期函数分类: - 创建期间的生命周期函数: - beforeCreate:实例刚在内存中被创建出来,此时,还没有初始化好 data 和 methods 属性 - created:实例已经在内存中创建OK,此时 data 和 methods 已经创建OK,此时还没有开始 编译模板 - beforeMount:此时已经完成了模板的编译,但是还没有挂载到页面中 - mounted:此时,已经将编译好的模板,挂载到了页面指定的容器中显示 - 运行期间的生命周期函数: - beforeUpdate:状态更新之前执行此函数, 此时 data 中的状态值是最新的,但是界面上显示的 数据还是旧的,因为此时还没有开始重新渲染DOM节点 - updated:实例更新完毕之后调用此函数,此时 data 中的状态值 和 界面上显示的数据,都已经完成了更新,界面已经被重新渲染好了! - 销毁期间的生命周期函数: - beforeDestroy:实例销毁之前调用。在这一步,实例仍然完全可用。 - destroyed:Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
做完效果如下: